如何改变表单控件光标颜色

表单大家应该不陌生,当然了,今天并不是来聊怎么做表单或者处理表单的样式网格。而是来聊聊怎么改变表单控件中光标的颜色。不知道在大家心中,表单控件的光标颜色是根据color属性来控制的。那么如果需要用CSS来改变表单控件,比如说input或者textarea元素的光标颜色,应该怎么处理呢?

先来上张图吧,我们要的效果类似这样的:

默认光标颜色

为了节省时间,直接用Bootstrap表单组件为例。

.form-control {
    color: #495057;
    ...
}

我们设置了表单控件的文本颜色为#495057。如下:

如果你体验之后,你不难发现,表单控件的光标颜色也和文本的颜色一样,如下图所示:

接下来我们要做的就是怎么想办法把光标的颜色给改了。如文章开头的示例图。

模拟光标

一直以来要实现这样的效果都是依靠模拟来实现。主要借助于CSS的-webkit-text-fill-color让文本变成镂空的,即把其设置为transparent,记住了,不是直接将color的值设置为transparent。除此之外,还需要借助text-shadow的威力。直接上代码吧:

.form-control {
    color: red !important;
    text-shadow: 0px 0px 0px #495057;
    -webkit-text-fill-color: transparent;
}
剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css/caret-color.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部