教你如何使用css隱藏input的光標

今天公司的ui忽然跑過來問我一個問題：「如何在不影響操做的狀況下，把input的光標隱藏了？」。

我相信不少人會跟我同樣，以爲這是個什麼狗屁需求，輸入框不要光標這不是反人類嗎？惋惜咱們只是個小小的擼碼仔，沒有反駁的權利只能默默接受...

---

在網上搜索了不少方式：用div模擬，設置readonly，設置disabled，設置自動blur等等方式，發現都不能知足需求，最後仍是找到一位大神提供的方法完美解決。

首先隱藏光標

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

由於光標是跟隨文字的，因此咱們把文字的color設置爲透明，光標就不見了耶~
可是問題來了，文字都透明瞭要輸入框有啥用？彆着急，請往下看~

把文字給顯示出來

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

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