Css——设置input输入框光标颜色
在使用 input 输入框时,我们可能会遇到需要给其设置光标颜色的情况。谷歌浏览器的默认光标颜色是黑色的,GitHub 上的光标却是白色,那么这个用 CSS 怎么改变呢?
上面描述的情景有两种实现方式:
1.使用color来实现
光标的颜色是继承自当前输入框字体的颜色,所以用 color 属性即可改变:
input{
color:red;
}
2.使用caret-color来实现
上一种方式已经修改了光标的颜色但是字体的颜色也改变了,如果只想改变光标的颜色而不改变字体的颜色那就使用 caret-color 属性:
input{
caret-color:red;
}
好了,通过上面的方式我们就可以修改 input 输入框光标颜色了~~~
Css——设置input输入框光标颜色的更多相关文章
- css只改变input输入框光标颜色不改变文字颜色实现方法
input:focus{color:blue}//光标颜色 input{ text-shadow: 0px 0px 0px red;//文字颜色 -webkit-text-fill-color: tr ...
- css设置input不显示光标
把光标颜色设置为透明色和父类一样就看不出来了,就好像取消了 caret-color: transparent; 设置了这个属性后,无论如何点击都好像没有光标似的
- 教你如何使用css隐藏input的光标
今天公司的ui突然跑过来问我一个问题:"如何在不影响操作的情况下,把input的光标隐藏了?". 我相信很多人会跟我一样,觉得这是个什么狗屁需求,输入框不要光标这不是反人类吗?可惜 ...
- CSS设置input placeholder文本的样式
placeholder是HTML5 input的新属性,英文意思是占位符,它一般表示input输入框的默认提示值. 下面是设置placeholder的文本样式的选择器的示例: /* webkit 浏 ...
- 控制input输入框光标的位置
一:理解input, textarea元素在标准浏览器下两个属性selectionStart, selectionEnd. selectionStart: 该属性的含义是 选区开始的位置: selec ...
- vue-element-admin 之改变登录界面input的光标颜色
前话:用框架原有的login更改而不重写的话,恰好当你input背景设置成白色的时候,光标会找不到=>原因:原框架的光标颜色是#fff 操作更改光标颜色: 找到src/views/login/i ...
- css设置input中placeholder字体
设置input中placeholder字体颜色 input::-webkit-input-placeholder {color:@a;} input:-moz-placeholder {color:@ ...
- 怎样使用 CSS 清除 input 输入框聚焦选中时的蓝色边框?
input 输入框的聚焦选中时的边框是由 outline 属性控制的, 直接使用: input { outline: none } 即可. 如下:
- css改变input输入框placeholder值颜色
::-webkit-input-placeholder { /* WebKit browsers */ color: #fff; } :-moz-placeholder { /* Mozilla Fi ...
随机推荐
- Intersection over Union(IoU) algorithms
IoU算法可用与评估两个多维度数据的相似度,举一个实际应用,做CV,目标检测,我们需要评估模型的识别准确率,不同于二元类问题,普通的评估算法不合适,于是用到了这个算法,这个算法简单易懂,评估效果也不错 ...
- PHP 基础 自动类型转换之比较运算符
<?php var_dump(' 123fg456'>=122); var_dump('some string' == 0); var_dump(123.0 == '123d456'); ...
- 结构体数组排序:1004 成绩排名 【pta】
结构体模板 struct STU { string name; //用string可以代替char string num; int s; }; sort是用快速排序实现的,属于不稳定排序,stable ...
- PHP 文件上传之如何识别文件伪装?——PHP的fileinfo扩展可!
问题:文件上传时候需要验证上传的文件是否合法,文件伪装如何识别? 一个简单测试:把txt文件后缀直接改成jpg;上传 <!DOCTYPE html> <html> <ti ...
- 记录STM32调试
问题:加入红外初始化后,程序卡在红外初始化处 解决思路: 1.确认时钟是不是好的 2.把定时器分解调试(输入捕获.溢出分开一步一步弄) 已解决:定时器的溢出中断 注意:STM32Cube配置好后,需要 ...
- opencv:图像直方图相似性比较
void hist_compare(Mat src1, Mat src2) { int histSize[] = { 256, 256, 256 }; int channels[] = { 0, 1, ...
- Could not find result map com.youotech.tl_cons_credit_rating.entity.Result
后端报错如下: java.lang.IllegalArgumentException: Result Maps collection does not contain value for com.yo ...
- 2016 Google code jam 大赛
二,RoundC import java.io.BufferedReader; import java.io.FileInputStream; import java.io.FileNotFoundE ...
- NTP服务安装及时间同步
1.安装ntp服务命令 yum install -y ntp 2.常用NTP服务器地址: ntp1.aliyun.com ntp2.aliyun.com ntp3.aliyun.com ntp4.al ...
- 7、Maven插件
什么是maven插件? maven 实际上是一类依赖插件执行的框架,每个任务实际上是由插件完成,Maven插件通常被用来 创建jar文件 创建war文件 编译代码文件 代码单元测试 创建工程文档 创建 ...