【CSS3】自定义设置可编辑元素闪烁光标的颜色
前言
因为业务需求, 要求我们的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; /* 光标颜色 */
}
}
小结
最近的需求里,移动端开发越来越多,而设备兼容性一直都是头疼的事情,如何更好的方式调试,写出兼容性更强的代码。需要的就是不断总结,减少错误重复发生。
最后能给大家带来帮助就好,希望大家多点赞,收藏 !!
周边知识
【CSS3】自定义设置可编辑元素闪烁光标的颜色的更多相关文章
- CSS3自定义滚动条样式
原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对w ...
- Visual Studio Code教程:基础使用和自定义设置
一.界面介绍 1.1 界面介绍 1.2 文件夹和文件的打开 文件——>打开文件夹/打开文件 1.3 新建文件/文件夹 新建文件: a. 文件——>新建文件: b. 按Ctrl+n; c. ...
- css3自定义移动端滚动条
css3自定义移动端滚动条<pre>/*定义滚动条宽 高度是根据内容设置的高度决定的*/::-webkit-scrollbar{ width: 5px;} /*定义滚动条轨道 内阴影+圆角 ...
- vim 自定义设置格式
在centos 6.9 或 7.3 环境下 可以在自己账户的主目录下新建一个.vimrc 的文件,放入一下代码: syntax on "即设置语法检测,当编辑C或者Shell脚本时,关键字会 ...
- css3自定义上传图片输入框的方法
css3自定义上传图片输入框的方法 代码如下<pre> <form class="form1"> <img src="/kelatoupia ...
- Jupyter自定义设置详解
今天专门花时间总结梳理一下jupyter的一些高级设置,jupyter我已经介绍过一次基本内容了,Setup and Linux | James Chen's Blogs,尤其是如何在服务器运行jup ...
- C#:实现快捷键自定义设置(转)
项目开发过程中,需要实现类似有道词典的软件设置中的自定义快捷键功能,如下图所示: 当我们相继按下Ctrl+Alt+M的时候,软件就会自动将快捷键显示在文本框中. 最终的效果如下图所示: private ...
- C#:实现快捷键自定义设置
代码下载 C#实现快捷键自定义设置 需求 项目开发过程中,需要实现类似有道词典的软件设置中的自定义快捷键功能,如下图所示: 当我们相继按下Ctrl+Alt+M的时候,软件就会自动将快捷键显示在文本框中 ...
- Netsharp产品标识自定义设置:产品名称、版权、LOGO等
阅读本文请先阅读Netsharp下载及环境搭建 Netsharp本身是一个业务基础平台,Netsharp本身基础上开发的业务产品对客户才有价值,客户看到的产品应该不是Netsharp而是具体的业务产品 ...
随机推荐
- docker-compose up Windows named pipe error:(code: 2)
执行docker-compose up启动项目时,报如下错误: ERRORERROR: Windows named pipe error: 膸碌脥艂艕艊藳禄碌藵脰赂露篓碌脛脦脛慕牛藝艁 (code: ...
- 绿洲作业第一周 - Y3每日中文学习任务清单
尽量每天完成一首古诗. 如果孩子另有学习安排,可在周日(2.16)23:59前,完成任务.有兴趣.学有余力的孩子可以自我拓展其中的“寒假读诗”.
- RDD(七)——依赖
概述 RDD只支持粗粒度转换,即在大量记录上执行的单个操作.将创建RDD的一系列Lineage(血统)记录下来,以便恢复丢失的分区.RDD的Lineage会记录RDD的元数据信息和转换行为,当该RDD ...
- java 的ConcurrentHashMap底层数据结构
集合是编程中最常用的数据结构.而谈到并发,几乎总是离不开集合这类高级数据结构的支持.比如两个线程需要同时访问一个中间临界区(Queue),比如常会用缓存作为外部文件的副本(HashMap).这篇文章主 ...
- EntityNotFoundException EntityExistException
package me.zhengjie.common.exception; import org.springframework.util.StringUtils; import java.util. ...
- C# 将多个DataTable添加到指定的DataSet中
DataSet ds = new DataSet();//创建数据集 DataTable dt1=new DataTable(); //表1 DataTable dt2 = new DataTable ...
- 手机遥控Office,变身演讲达人
编者按:在商业演讲中,需要在PPT/Word/Excel文件中切换以达到最佳演讲效果-Office Remote可帮助Windows Phone变身Office的智能遥控.以蓝牙控制电脑,触屏操作多种 ...
- 利用卷积神经网络实现MNIST手写数据识别
代码: import torch import torch.nn as nn import torch.utils.data as Data import torchvision # 数据库模块 im ...
- Docker Dockerfile基本配置
1.dockerfile介绍 Dockerfile是Docker用来构建镜像的文本文件,包含自定义的指令和格式.可以通过docker build命令从Dockerfile中构建镜像.这个过程与传统分布 ...
- Mysql————基本sql语句
mysql中的基本语法有四种: 1.DDL语句:(用CREAT和DROP操作的语句) 用于创建.修改.和删除数据库内的数据结构,如:1:创建和删除数据库(CREATE DATABASE || DROP ...