教你如何使用css隐藏input的光标

bingchen 发布于2019-08-29 13:58 / 1024人阅读

摘要：今天公司的突然跑过来问我一个问题如何在不影响操作的情况下，把的光标隐藏了。

今天公司的ui突然跑过来问我一个问题：“如何在不影响操作的情况下，把input的光标隐藏了？”。

我相信很多人会跟我一样，觉得这是个什么狗屁需求，输入框不要光标这不是反人类吗？可惜我们只是个小小的撸码仔，没有反驳的权利只能默默接受...

在网上搜索了很多方式：用div模拟，设置readonly，设置disabled，设置自动blur等等方式，发现都不能满足需求，最后还是找到一位大神提供的方法完美解决。

首先隐藏光标

因为光标是跟随文字的，所以我们把文字的color设置为透明，光标就不见了耶~
但是问题来了，文字都透明了要输入框有啥用？别着急，请往下看~

把文字给显示出来

在input上设置text-shadow，文字是透明的但是我们可以用文字阴影来代替文字的颜色，这样就完美解决啦。

GPU云服务器云服务器 input光标 css如何使用如何使用css input html+css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112830.html

教你如何使用css隐藏input的光标

摘要：今天公司的突然跑过来问我一个问题如何在不影响操作的情况下，把的光标隐藏了。今天公司的ui突然跑过来问我一个问题：如何在不影响操作的情况下，把input的光标隐藏了？。我相信很多人会跟我一样，觉得这是个什么狗屁需求，输入框不要光标这不是反人类吗？可惜我们只是个小小的撸码仔，没有反驳的权利只能默默接受... 在网上搜索了很多方式：用div模拟，设置readonly，设置disable...

URLOS 2019-08-02 15:59 评论0 收藏0
用Canvas实现文本编辑器（支持艺术字渲染与动画）

摘要：项目中文字由进行渲染。待触发时，取消中文输入标记，将文字渲染到上。而其中一些有趣的细节实现如文本渲染，对中文笔画分割实现有趣的动画等并没有描写。导言目前富文本编辑器的实现主要有两种技术方案：一个是利用contenteditable属性直接对html元素进行编辑，如draft.js；另一种是代理textarea + 自定义div + 模拟光标实现。对于类似word的经典富文本编辑器，...

OldPanda 2019-08-20 15:21 评论0 收藏0
CSS提高用户体验的那些事

1. 选择合适的鼠标光标在有一些触摸屏上我们可能需要隐藏鼠标的光标，比如说播放器的屏幕上，这种情形下隐藏鼠标光标能带来性能方面的提升。使用cursor: none;可以达到隐藏鼠标光标的效果。对于一些旧的浏览器可能不支持这些新的光标关键字，可以通过使用老的方式，用一张1 * 1 的透明GIF图片，然后这样做： video { cursor: url(transparent.gif)...

浠ラ箍 2019-08-29 12:20 评论0 收藏0
如何使用纯 CSS 制作四子连珠游戏

摘要：序言你是否想过单纯使用也可以制作一款游戏甚至可以双人对决这是一篇非常有趣的文章，作者详细讲解了使用纯制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法。在本文中，我将介绍使用纯制作的四子连珠游戏的关键思想。序言：你是否想过单纯使用 CSS 也可以制作一款游戏？甚至可以双人对决！这是一篇非常有趣的文章，作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问...

I_Am 2019-08-02 16:05 评论0 收藏0