码云笔记前端博客
Home > 前端技术 > 如何用CSS原生属性caret-color改变input输入框光标颜色

如何用CSS原生属性caret-color改变input输入框光标颜色

2019-09-06 分类:前端技术 作者:码云 阅读(237)

本文共计2097个字,阅读时间预计6分钟,干货满满,记得点赞加收藏哦

表单对大家来说并不陌生,当然,我也不是来和大家聊怎么做表单或者处理表单的样式网格,因为这些对于大家来说都是小儿科的东西。而是来聊聊怎么改变表单控件中光标的颜色。日常开发中我们可能会有改变input光标颜色的需求,在谷歌浏览器的默认光标颜色是黑色的,而表单控件的光标颜色是根据color属性来控制的。那么如果需要用CSS来改变表单控件,比如说input或者textarea元素的光标颜色,那么这个用CSS怎么改变呢? 先来看一下效果图:
如何用CSS原生属性caret-color改变input输入框光标颜色
这种效果有两种实现方式:

1.使用color来实现

光标的颜色是继承自当前输入框字体的颜色,所以用color属性即可改变:

1
2
3
input{
    color:red;
}

效果如下:
如何用CSS原生属性caret-color改变input输入框光标颜色

CSS改变输入框光标颜色的原生属性caret-color

caret-color 属性用来定义插入光标(caret)的颜色,这里说的插入光标,就是那个在网页的可编辑器区域内,用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。

上面说的“插入光标”(insertion caret)只是光标(caret)的其中一种。比如一些浏览器有一种光标叫做“导航光标“(navigation caret),它可以在不可编辑区域内来回移动。此外,当鼠标指针移动到一段 cursor 属性是 auto 的文本上方时,或移动到 cursor 属性是 text、 vertical-text 的內容上方時,虽然看起来有点像插入光标,但它不是插入光标(caret),而是鼠标指针光标(cursor)。

上一种方式已经修改了光标的颜色但是字体的颜色也改变了,如果只想改变光标的颜色而不改变字体的颜色那就使用caret-color属性:

1
2
3
input{
    caret-color:red;
}

效果如下:
如何用CSS原生属性caret-color改变input输入框光标颜色
caret-color属性不仅对于原生的输入表单控件有效,设置contenteditable的普通HTML标签也适用。

例如:

1
2
3
4
5
6
7
8
[contenteditable="true"] {
    width: 120px;
    border: 1px solid #ddd;
   padding: 3px;
    line-height: 20px;
    color: #333;
   caret-color: red;
}
1
<div contenteditable="true">文字</div>

效果如下图:
如何用CSS原生属性caret-color改变input输入框光标颜色

兼容性

caret-color属性目前Chrome和Firefox基本上可以放心使用,但是Safari以及IE浏览器则还需要等待一些时日。
具体兼容性数据见下截图:
如何用CSS原生属性caret-color改变input输入框光标颜色
下面问题来了,对于这些不兼容的浏览器,有没有什么其他办法可以让他们也能实现插入状态光标的变色效果呢?

其他方法改变输入框的闪烁的光标颜色

对于IE浏览器,其光标颜色看上去是永远固定的黑色,并不跟随输入框的颜色color变化,因此对于IE浏览器,是没有什么好方法的。

但是,对于Safari浏览器,由于输入框控件的闪烁光标颜色是和设置的color属性颜色一致,因此我们是有手段可以对光标进行控制的。

具体实现代码如下:

1
2
3
4
5
6
input {
  color: red;
}
input::first-line {
  color: #333;
}

Safari浏览器下截图效果如下:
如何用CSS原生属性caret-color改变input输入框光标颜色
借助::first-line伪元素的方法在Chrome,Safari浏览器下表现良好,但是Firefox浏览器并不支持,其表现为<input>输入框里面的内容不属于::first-line,因此,整个输入框文字都是红色。

对于不支持::first-line方法的浏览器,相关CSS会污染正常的样式表现,因此我们需要区分处理,例如可以这样:

1
2
3
4
5
6
input, input::first-line {
    color: #333;
}
@supports (-webkit-mask: none) {
    input { color: red; }
}

然而这种方法也有局限性,对于<textarea>这种多行输入控件就无能为力,因为::first-line只能控制首行元素颜色。

两种实现方法综合

综合上面两种方法,可以得到最佳实践如下:

如果浏览器支持caret-color属性,优先使用caret-color(Chrome/Firefox/Opera);其次使用::first-line方法(Safari);最后忽略(如IE)。

整合后CSS如下:

1
2
3
4
5
6
7
8
input {
    color: #333;
   caret-color: red;
}
@supports (-webkit-mask: none) and (not (cater-color: red)) {
    input { color: red; }
    input::first-line { color: #333; }
}

效果如下截图(Firefox截图):
如何用CSS原生属性caret-color改变input输入框光标颜色

结束语

但是在IE浏览器中输入光标的颜色自定义,怕是要借助JS才能实现,而且还不好实现,如何实时知道光标位置在哪里,什么时候消失什么时候没有是个很难实现的问题。最好的解决方法就是忽略IE浏览器

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(8) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
8

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 1 条评论 - 如何用CSS原生属性caret-color改变input输入框光标颜色

  1. 乾坤剑神 Linux Chrome 62.0.3202.84

    嗯,学到了,正好用到,谢谢

博客简介

码云笔记 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记有你更精彩!
更多博客详情请看关于博客

精彩评论

站点统计

  • 文章总数: 472 篇
  • 分类数目: 13 个
  • 独立页面: 8 个
  • 评论总数: 228 条
  • 链接总数: 15 个
  • 标签总数: 1040 个
  • 建站时间: 522 天
  • 访问总量: 8681381 次
  • 最近更新: 2019年11月18日