首页 / CSS / CSS自定义设置元素闪烁光标颜色
CSS自定义设置元素闪烁光标颜色
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了CSS自定义设置元素闪烁光标颜色,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2138字,纯文字阅读大概需要4分钟。
内容图文
![CSS自定义设置元素闪烁光标颜色](/upload/InfoBanner/zyjiaocheng/290/47cbc244699648719aea191973109df7.jpg)
前言
因为业务需求, 要求我们的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 不支持。需要写两个选择器。
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; }
缺陷: 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; /* 光标颜色 */ } }
小结
最近的需求里,移动端开发越来越多,而设备兼容性一直都是头疼的事情,如何更好的方式调试,写出兼容性更强的代码。需要的就是不断总结,减少错误重复发生。
最后能给大家带来帮助就好,希望大家多点赞,收藏 !!
相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
推荐阅读:
怎样处理MySQL数据库拒绝访问
linux后台运行node服务指令步骤方法
以上就是CSS自定义设置元素闪烁光标颜色的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的CSS自定义设置元素闪烁光标颜色全部内容,希望文章能够帮你解决CSS自定义设置元素闪烁光标颜色所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。