用css隱藏input的游標

這次給大家帶來用css隱藏input的游標，用css隱藏input的游標的注意事項有哪些，下面就是實戰案例，一起來看一下。

前言

最近公司的ui突然跑過來問我一個問題：“如何在不影響操作的情況下，把input的游標隱藏了？”。

我相信很多人會跟我一樣，覺得這是個什麼狗屁需求，輸入框不要游標這不是反人類嗎？可惜我們只是個小小的擼碼仔，沒有反駁的權利只能默默接受...

在網上搜尋了很多方式：用p類比，設定readonly，設定disabled，設定自動blur等等方式，發現都不能滿足需求，最後還是找到一位大神提供的方法完美解決。

方法如下：

首先隱藏游標

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

因為游標是跟隨文字的，所以我們把文字的color設定為透明，游標就不見了耶~

但是問題來了，文字都透明了要輸入框有啥用？別著急，請往下看~

把文字給顯示出來

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

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

text-shadow屬性

文法：

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

說明：

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

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

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

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

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

css3的動畫序列animation

CSS怪異盒模型和標準盒模型如何使用