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

7

前言

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

解决方案

  • 使用 ::first-line 伪元素
  • 使用 text-shadowtext-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; /* 光标颜色 */
    }
}

小结

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

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

周边知识


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

载入中...