亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

如何利用css隱藏input的光標(biāo)示例代碼

  發(fā)布時(shí)間：2017-12-13 16:46:39   作者：追逆風(fēng)   我要評(píng)論
這篇文章主要給大家介紹了關(guān)于如何利用css隱藏input光標(biāo)的相關(guān)資料，這是最近工作中遇到的一個(gè)需求，雖然看似不合理，但是有需要就要有解決的辦法，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。

前言

最近公司的ui突然跑過(guò)來(lái)問(wèn)我一個(gè)問(wèn)題：“如何在不影響操作的情況下，把input的光標(biāo)隱藏了？”。

我相信很多人會(huì)跟我一樣，覺(jué)得這是個(gè)什么狗屁需求，輸入框不要光標(biāo)這不是反人類(lèi)嗎？可惜我們只是個(gè)小小的擼碼仔，沒(méi)有反駁的權(quán)利只能默默接受...

在網(wǎng)上搜索了很多方式：用div模擬，設(shè)置readonly，設(shè)置disabled，設(shè)置自動(dòng)blur等等方式，發(fā)現(xiàn)都不能滿(mǎn)足需求，最后還是找到一位大神提供的方法完美解決。

方法如下：

首先隱藏光標(biāo)

  <style>
    input{
      color: transparent;
    }
  </style>

因?yàn)楣鈽?biāo)是跟隨文字的，所以我們把文字的color設(shè)置為透明，光標(biāo)就不見(jiàn)了耶~

但是問(wèn)題來(lái)了，文字都透明了要輸入框有啥用？別著急，請(qǐng)往下看~

把文字給顯示出來(lái)

  <style>
    input{
      color: transparent;
      text-shadow: 0 0 0 #000;
    }
  </style>

在input上設(shè)置text-shadow，文字是透明的但是我們可以用文字陰影來(lái)代替文字的顏色，這樣就完美解決啦。

text-shadow屬性

語(yǔ)法：

text-shadow:x-offset y-offset blur color;

說(shuō)明：

     x-offset：（水平陰影）表示陰影的水平偏移距離，單位可以是px、em或者百分比等。如果值為正，則陰影向右偏移；如果值為負(fù)，則陰影向左偏移；

     y-offset：（垂直陰影）表示陰影的垂直偏移距離，單位可以是px、em或者百分比等。如果值為正，則陰影向下偏移；如果值為負(fù)，則陰影向上偏移；

     blur：（模糊距離）表示陰影的模糊程度，單位可以是px、em或者百分比等。blur值不能為負(fù)。如果值越大，則陰影越模糊；如果值越小，則陰影越清晰。當(dāng)然，如果不需要陰影模糊效果，可以吧blur值設(shè)置為0；

     color：（陰影的顏色）表示陰影的顏色

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

相關(guān)文章

最新評(píng)論