在使用 input 输入框时,我们可能会遇到需要给其设置光标颜色的情况。谷歌浏览器的默认光标颜色是黑色的,GitHub 上的光标却是白色,那么这个用 CSS 怎么改变呢?

  上面描述的情景有两种实现方式:

  1.使用color来实现

  光标的颜色是继承自当前输入框字体的颜色,所以用 color 属性即可改变:

input{
color:red;
}

  

  2.使用caret-color来实现

上一种方式已经修改了光标的颜色但是字体的颜色也改变了,如果只想改变光标的颜色而不改变字体的颜色那就使用 caret-color 属性:

input{
caret-color:red;
}

  

  好了,通过上面的方式我们就可以修改 input 输入框光标颜色了~~~

Css——设置input输入框光标颜色的更多相关文章

  1. css只改变input输入框光标颜色不改变文字颜色实现方法

    input:focus{color:blue}//光标颜色 input{ text-shadow: 0px 0px 0px red;//文字颜色 -webkit-text-fill-color: tr ...

  2. css设置input不显示光标

    把光标颜色设置为透明色和父类一样就看不出来了,就好像取消了 caret-color: transparent; 设置了这个属性后,无论如何点击都好像没有光标似的

  3. 教你如何使用css隐藏input的光标

    今天公司的ui突然跑过来问我一个问题:"如何在不影响操作的情况下,把input的光标隐藏了?". 我相信很多人会跟我一样,觉得这是个什么狗屁需求,输入框不要光标这不是反人类吗?可惜 ...

  4. CSS设置input placeholder文本的样式

    placeholder是HTML5  input的新属性,英文意思是占位符,它一般表示input输入框的默认提示值. 下面是设置placeholder的文本样式的选择器的示例: /* webkit 浏 ...

  5. 控制input输入框光标的位置

    一:理解input, textarea元素在标准浏览器下两个属性selectionStart, selectionEnd. selectionStart: 该属性的含义是 选区开始的位置: selec ...

  6. vue-element-admin 之改变登录界面input的光标颜色

    前话:用框架原有的login更改而不重写的话,恰好当你input背景设置成白色的时候,光标会找不到=>原因:原框架的光标颜色是#fff 操作更改光标颜色: 找到src/views/login/i ...

  7. css设置input中placeholder字体

    设置input中placeholder字体颜色 input::-webkit-input-placeholder {color:@a;} input:-moz-placeholder {color:@ ...

  8. 怎样使用 CSS 清除 input 输入框聚焦选中时的蓝色边框?

     input 输入框的聚焦选中时的边框是由 outline 属性控制的, 直接使用: input { outline: none } 即可. 如下:

  9. css改变input输入框placeholder值颜色

    ::-webkit-input-placeholder { /* WebKit browsers */ color: #fff; } :-moz-placeholder { /* Mozilla Fi ...

随机推荐

  1. MySQL 学习(二)总体框架 & redo-log 和 bin-log 的介绍

    文章部分总结来自课程,非原创 MySQL 组织架构     下面这张图就可以解释关于 MySQL 底层的组织架构了.     上面的图可以直观地展示两个重要的东西 : 一条 SQL 的执行流程 MyS ...

  2. C#系统库的源代码

    .NET Core:https://github.com/dotnet/corefx .NET Framework:https://referencesource.microsoft.com

  3. 集合转换为数组toArray(),数组转换为集合asList()

    package seday12; import java.util.ArrayList;import java.util.Arrays;import java.util.Collection; /** ...

  4. List 线性表:ArrayLis,LinkedList

    package seday11.list; import java.util.ArrayList;import java.util.List; /*** @author xingsir * java. ...

  5. HDU2444 The Accomodation of Students(二分图最大匹配)

    有n个关系,他们之间某些人相互认识.这样的人有m对.你需要把人分成2组,使得每组人内部之间是相互不认识的.如果可以,就可以安排他们住宿了.安排住宿时,住在一个房间的两个人应该相互认识.最多的能有多少个 ...

  6. plutosdr初步

    关于最近新出的pluto sdr ,一款较新的sdr,可以通过破解将ad9363改成ad9361,提升频率范围,但是据说没有办法改变带宽. 可以通过补丁方式使用某款软件来进行收听fm

  7. Spark Streaming实践和优化

    发表于:<程序员>杂志2016年2月刊.链接:http://geek.csdn.net/news/detail/54500 作者:徐鑫,董西成 在流式计算领域,Spark Streamin ...

  8. 《创业者技能树》--创业课--14天复盘第一课candy2--HHR计划

    1,厉害的人是如何分析问题的?

  9. Introducing .NET 5

    Today, we’re announcing that the next release after .NET Core 3.0 will be .NET 5. This will be the n ...

  10. Centos5.5+LAMP环境

    Note:如果网络正常,apache服务正常,仍然不能访问网页.需要检查linux 防火墙是否关闭. ( 先重新启动防火墙 service iptables start 然后输入配置防火墙的命令并查看 ...