• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

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

CSS3 web前端中文站 3年前 (2017-09-01) 1579次浏览 已收录 0个评论
文章目录[隐藏]

CSScaret-color

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

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

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

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

默认光标颜色

为了节省时间,直接用 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; } 

亲自体验一下,看看是不是想要的效果。为了让上面的效果更健壮一些,比如说要考虑placeholder时的效果。可以这样来做:

input,textarea {     
color: rgb(60, 0, 248);  
/* 光标的颜色*/     
text-shadow: 0px 0px 0px #D60B0B; 
/* 文本颜色 */     
-webkit-text-fill-color: transparent; } 
input::-webkit-input-placeholder{     
color: rgb(60, 0, 248);  
/* 改变 placeholder 文本颜色 */     
text-shadow: none;     
-webkit-text-fill-color: initial; } 

caret-color

到今天为止,我们不需要这么蛋疼了。CSS 提供了一个属性caret-color,可以直接让我们控制inputtextarea控件的光标颜色,甚至是可编辑的 HTML 元素,像这样的<div contenteditable>。如此一来,只需要在样式中添加:

input, textarea, [contenteditable] {     
color: #495057; 
/* 文本颜色 */     
caret-color: red; 
/* 光标颜色 */ } 

效果如下:

兼容性

如果在你的业务中要改变表单控件的光标颜色,那么就可以直接使用caret-color属性。当然你或许会担心其兼容性。如果你有这方面的考虑的话,可以通过 Caniuse 来检测一下。

当然你也可以配合 CSS 的@supports条件查询语句一起使用:

input, textarea, [contenteditable] {     
color: red;     
text-shadow: 0px 0px 0px #495057;     
-webkit-text-fill-color: transparent; } 
@supports (caret-color: red) {     
input,     textarea,     [contenteditable] {         
color: #495057; 
/* 文本颜色 */         
caret-color: red; 
/* 光标颜色 */     } }    

总结

这篇文章主要介绍了如何通过 CSS 来改变表单控件inputtextarea以及一些可编辑的 HTML 元素的光标颜色。到目前为止有两种方式,一种是通过-webkit-text-fill-color: transparenttext-shadow来控制文本颜色,配合color控制光标颜色。另外更为直接的方法是使用caret-color来控制光标颜色。即使你担心caret-color的浏览器兼容性,可以考虑配合@supports条件查询语句一起来使用。希望这篇文章的介绍在关键时刻能帮上大家。如果你有更好的姿势,欢迎在下面的评论中与我分享。

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:如何改变表单控件光标颜色
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址