今天小编跟大家讲解下有关如何利用css隐藏input的光标示例代码 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关如何利用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 文字是透明的但是我们可以用文字阴影来代替文字的颜色 这样就完美解决啦。
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：（阴影的颜色）表示阴影的颜色
总结
以上就是这篇文章的全部内容了 希望本文的内容对大家的学习或者工作具有一定的参考学习价值 如果有疑问大家可以留言交流 谢谢大家对AIDI的支持。
来源：爱蒂网
