CSS 属性：caret-color

一、`caret-color` 属性作用

`caret-color` : 改变输入框光标颜色，同时又不改变输入框里面的内容的颜色

caret 表示‘插入符号’,指处于内容可插入状态的光标

input{color:blue;caret-color: red;
}

caret-color 属性不仅对于原生的输入表单控件有效，设置contenteditable的普通标签也适用。
contenteditable 属性: 规定是否可编辑元素内容.

HTML:

<div contenteditable="true">文字蓝色，光标黄色</div>

CSS:

[contenteditable = "true"] {margin-left: 20px;font-size: 30px;color: blue;caret-color: yellow;
}

二、caret-color 的兼容情况

目前 Chrome 和 Firefox 基本可以使用，但是 Safari 以及 IE 浏览器则暂时还不支持。

三、解决兼容性问题

思路：

Chrome 和 Firefox 使用原生的 caret-color 属性
Safari 使用 :first-line 实现
IE 浏览器放弃

解释：

IE 浏览器的光标颜色永远是固定的黑色，并不跟随输入框的颜色 color 变化，因此对于 IE 浏览器没有好的办法；
Safari 浏览器，由于输入框控件的闪烁光标颜色和设置的 color 属性颜色一致，所以可以对光标进行控制。

局限性：

:first-line ：在 Chrome, Safari 浏览器表现良好，但是在 Firefox 浏览器并不支持，其表现为 input 输入框里面的内容不属于 :first-line，因此整个输入框文字都是红色的。
对于 <textarea> 多行输入控件无效，因为 :first-line 只能控制首行元素颜色。
微信小程序暂不支持 :first-line 伪类。

HTML:

<input type="text" class="third" placeholder="兼容性写法">

CSS:

.third {width: 1000px;font-size: 30px;margin: 20px;box-sizing: border-box;color: red;caret-color: blue;
}@supports ( -webkit-mask: none ) and ( not ( caret-color: blue )) {.third {color: blue;}.third::first-line {color: red;}
}

四、资料

学习资料来自张鑫旭的博客 ——CSS改变插入光标颜色caret-color简介及其它变色方法

CodePen：https://codepen.io/JiaxiaLi/pen/YOrwZP

CSS 属性：caret-color相关推荐

DW中CSS属性详解
作者:未知来源:5D多媒体在Dreamweaver的CSS样式里包含了W3C规范定义的所有CSS1的属性,Dreamweaver把这些属性分为Type(类型).Background(背 ...
CSS属性 —— color属性
CSS color 属性 1. color 属性 2. color 属性值 3. 十六机制颜色值 4. RGBA与十六进制转换 1. color 属性 color 属性用于指定文本颜色. 对应版本:C ...
css不换行属性_那些不常见，但却非常实用的css属性(整理不易)
1.-webkit-line-clamp 可以把块容器中的内容限制为指定的行数.并且在超过行数后,在最后一行显示"..." 这是正常的展示 display: -webkit-b ...
css不换行属性_那些不常见，但却非常实用的 css 属性
作者:寒水寺一禅人类身份验证 - SegmentFaultsegmentfault.com 1.-webkit-line-clamp 可以把块容器中的内容限制为指定的行数.并且在超过行数后,在 ...
td外边加div为啥不隐藏_那些不常见，但却非常实用的 css 属性
(给前端大全加星标,提升前端技能) 作者:寒水寺一禅 https://segmentfault.com/a/1190000022851543 1.-webkit-line-clamp 可以把块容器 ...
css超过两行显示为..._使用这些不太常用的CSS属性，布局效率上又提高了一个层次...
有很多CSS属性,有些人不了解,或者他们了解它们,但是忘记在需要时使用它们.其实,有时候我们用 JavaScript 来实某些交互,CSS 一个属性就能搞定了,这可以大大节约我们编码的时间. 作为前端 ...
css元素与浏览器边框,别具光芒CSS属性、浏览器兼容与网页布局
别具光芒CSS属性.浏览器兼容与网页布局语音编辑锁定讨论上传视频上传视频 <别具光芒CSS属性.浏览器兼容与网页布局>是2008年人民邮电出版社出版的图书.该书结合大量范例与实 ...
前端笔记（7）css属性书写顺序，布局流程，chrome调试工具
css样式表/层叠样式表(5) css属性书写顺序布局流程 chrome调试工具 css属性书写顺序布局定位属性 display / position / float / clear / visi ...
常见的CSS属性和值CascadingStyleSheets
字体文本背景位置边框列表其他 CSS中修饰字体的属性属性描述属性值 font-family 字体族科任意字体族科名称都可以使用例如Times.serif等, ...
050_学习的CSS属性
1. 尺寸属性(Dimension) height: 设置元素高度. max-height: 设置元素的最大高度. max-width: 设置元素的最大宽度. min-height: 设置元素的最小高 ...

CSS 属性：caret-color

一、`caret-color` 属性作用

`caret-color` : 改变输入框光标颜色，同时又不改变输入框里面的内容的颜色

二、caret-color 的兼容情况

三、解决兼容性问题

四、资料

CSS 属性：caret-color相关推荐

最新文章

热门文章

CSS 属性：caret-color

一、caret-color 属性作用

caret-color : 改变输入框光标颜色，同时又不改变输入框里面的内容的颜色

二、caret-color 的兼容情况

三、解决兼容性问题

四、 资料

CSS 属性：caret-color相关推荐

最新文章

热门文章

一、`caret-color` 属性作用

`caret-color` : 改变输入框光标颜色，同时又不改变输入框里面的内容的颜色

四、资料