教你如何使用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，文字是透明的可是咱们能够用文字阴影来代替文字的颜色，这样就完美解决啦。