【CSS3】自定义设置可编辑元素闪烁光标的颜色

curried 发布于2019-08-29 15:29 / 911人阅读

摘要：解决方案使用伪元素使用和使用修改元素原理一般来说，设置框的属性会修改文本内容的颜色，同时顺带改变光标的颜色。和原理先利用设置文本和光标的颜色然后利用设置文本阴影覆盖文本颜色最后使用将文本颜色置为透明。

前言

因为业务需求, 要求我们的input框内的文本与悬浮的光标颜色不同, 这样的问题肯定在书本上很难找到解决办法， 需要通过平时的基础积累和经验。

解决方案

使用 ::first-line 伪元素

使用 text-shadow 和 text-fill-color

使用 caret-color

::fist-line 修改元素

原理

一般来说，设置input框的 color 属性会修改文本内容的颜色，同时顺带改变光标的颜色。而::first-line也可以设置首行文本内容的颜色, 利用选择器的权重比，::first-line覆盖了前者的color,最终得到了想要的结果。实际演示

input.form-control {
    color: #05d380; /* 光标颜色 */
}

input.form-control::first-line {
    color: #333; /* 文本颜色 */
}

缺陷

只适用于input框, 同时微信 webview 不支持。需要写两个css样式。

text-shadow 和 text-fill-color

原理

先利用color设置文本和光标的颜色, 然后利用 text-shadow 设置文本阴影覆盖文本颜色, 最后使用text-fill-color 将文本颜色置为透明。实际演示

.form-control {
    color: #05d380; /* 光标颜色 */
    text-shadow: 0 0 0 #333; /* 文本颜色 */
    -webkit-text-fill-color: transparent;
}

/* 设置暗文颜色 */
.form-control::-webkit-input-placeholder{ 
    color: rgb(60, 0, 248); /* 改变placeholder文本颜色 */ 
    text-shadow: none; 
    -webkit-text-fill-color: initial;
}

缺陷

text-fill-color 属性不太支持 firefox, 目前尽量使用 -webkit- 前缀。

caret-color

原理

这是CSS3最新的属性，目的就是为了解决光标颜色的问题。实际演示

.form-control {
    color: #333; /* 文本颜色 */
    caret-color: #05d380; /* 光标颜色 */
}

缺陷

低版本IE浏览器不支持

兼容性考虑

为了兼容多端设备显示情况，我们必须要将一些情况考虑进来, 使用@support 条件判断来检测是否可用。因为我的环境在于移动端展示，所以只要要求进行兼容移动端，结合第二种和第三种解决方案，可以大面积覆盖设备。

.form-control {
    color: #05d380; /* 光标颜色 */
    text-shadow: 0 0 0 #333; /* 文本颜色 */
    -webkit-text-fill-color: transparent;
}

@supports (caret-color: #05d380) {
    .form-control {
        color: #333; /* 文本颜色 */
        caret-color: #05d380; /* 光标颜色 */
    }
}

小结

最近的需求里，移动端开发越来越多，而设备兼容性一直都是头疼的事情，如何更好的方式调试，写出兼容性更强的代码。需要的就是不断总结，减少错误重复发生。

最后能给大家带来帮助就好，希望大家多点赞，收藏 !!

周边知识

CSS改变插入光标颜色caret-color简介

W3cplus 介绍 caret-color

自定义 command line

专线服务超融合服务器 js 设置元素的颜色 h5视频播放器可自定义样式可编辑的html html表格的可编辑

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

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

【CSS3】自定义设置可编辑元素闪烁光标的颜色

摘要：解决方案使用伪元素使用和使用修改元素原理一般来说，设置框的属性会修改文本内容的颜色，同时顺带改变光标的颜色。和原理先利用设置文本和光标的颜色然后利用设置文本阴影覆盖文本颜色最后使用将文本颜色置为透明。前言因为业务需求, 要求我们的input框内的文本与悬浮的光标颜色不同, 这样的问题肯定在书本上很难找到解决办法，需要通过平时的基础积累和经验。解决方案使用 ::first-l...

cncoder 2019-08-05 13:58 评论0 收藏0
【CSS3】自定义设置可编辑元素闪烁光标的颜色

摘要：解决方案使用伪元素使用和使用修改元素原理一般来说，设置框的属性会修改文本内容的颜色，同时顺带改变光标的颜色。和原理先利用设置文本和光标的颜色然后利用设置文本阴影覆盖文本颜色最后使用将文本颜色置为透明。前言因为业务需求, 要求我们的input框内的文本与悬浮的光标颜色不同, 这样的问题肯定在书本上很难找到解决办法，需要通过平时的基础积累和经验。解决方案使用 ::first-l...

felix0913 2019-08-02 10:30 评论0 收藏0
偏门却又实用的 CSS 样式

摘要：实现不换行自动换行强制换行不换行自动换行强制换行常用的选择器以下代码是选择父类下第一个子节点，元素，建议学习这个样式属性的使用，很实用的。不允许负值用百分比指定起止色位置。::-Webkit-Input-Placeholder input 的 H5 placeholder 属性，很好用，但不能直接改这个文字颜色，所以目前的解决方法就是用::input-placeholder属性来改。配合 ...

Michael_Ding 2019-04-23 11:55 评论0 收藏0
一个前端程序猿的Sublime Text3的自我修养

摘要：效果如下配置方法参考下的配置方法完美支持提供了比默认更好的语法高亮，而且他完美支持。语法高亮默认安装的对的支持让人抓狂，帧动画别开玩笑了你只会看到一片白色的纯文本一样的代码。事实上不光，我建议用完全替代原来的来完成语法高亮。文章转载自本人的博客《三省吾身丶丶》点击查看喜欢的话请疯狂的推荐吧！ ^_^ 本文章会在本人有插件或者设置更新时，进行不定时更新偷懒了，图片地址直接设置的博客...

KunMinX 2019-08-22 10:59 评论0 收藏0
Android之自定义EditText光标和下划线颜色

摘要：自定义光标颜色有一个属性，它就是用来设置光标样式的。在中再增加一个，加上属性，效果如下可以看到，光标和下划线的颜色都会修改掉，而间距还是会保留。光标和下划线之间要有点距离，所以的下方内边距设为。最近在写些小Demo复习基础，在用到EditText的时候突然发现之前几乎没有注意到它的光标和下划线的颜色，于是花了不少时间，看了不少博客，现在就来总结和分享一下收获。 1、第一印象：原生的E...

cppprimer 2019-06-25 11:16 评论0 收藏0