在使用 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. Python中的bool类型

    Python 布尔类型 bool python 中布尔值使用常量True 和 False来表示:注意大小写 比较运算符< > == 等返回的类型就是bool类型:布尔类型通常在 if 和 ...

  2. 《实战Java高并发程序设计》读书笔记六

    第六章 Java 8 与并发 1.函数式编程 函数作为一等公民: 将函数作为参数传递给另外一个函数这是函数式编程的特性之一. 函数可以作为另外一个函数的返回值,也是函数式编程的重要特点. 无副作用: ...

  3. 数制的运用-CodeForces - 535B

    题解: 因为每一位只可能是4或者7,可以类比二进制的思想. 基数为2,每一位的权值为2i-1:数字4表示的大小为1*2i-1:数字7表示的大小为2*2i-1. 将给定的n按照这种方法进行分解,求和.即 ...

  4. 11: Django + gunicorn + Nginx 的生产环境部署

    1.1 gunicorn介绍   1.Gunicorn 1. Gunicorn是使用Python实现的WSGI服务器, 直接提供了http服务, 并且在woker上提供了多种选择, gevent, e ...

  5. EF中 GroupJoin 与 Join

    数据: GroupJoin: 返回左表所有数据 using (tempdbEntities context = new tempdbEntities()) { var query = context. ...

  6. Java AQS 的胡言乱语修正版

    前言 适合读者:3 年以上经验的同学 谈到并发编程,基本上都会想到JDK 的 JUC 工具包,它包含 锁,并发工具类,原子类,线程池,还有阻塞队列,这是从网上找的一个大致的知识体系. 相信这些工具读者 ...

  7. python调用scala或java包

    项目中用到python操作hdfs的问题,一般都是使用python的hdfs包,然而这个包初始化起来太麻烦,需要: from pyspark impport SparkConf, SparkConte ...

  8. vultr安装kali

    前言 很多国内的主机不支持自定义安装系统,且也不方便下载国外资料:),所以需要使用vultr安装kali. 1.上传镜像 镜像地址填这个(我当时的最新版本) https://cdimage.kali. ...

  9. 【渗透测试】Squirrelmail远程代码执行漏洞+修复方案

    最近网上有点不太平,爆出各种漏洞,等下会把近期的漏洞复现一下,发出来.安全圈的前辈总是默默的奉献,在这里晚辈们只能站在巨人的肩膀上,跟紧前辈们的步伐,走下去. -------------------- ...

  10. 吴裕雄 python 神经网络——TensorFlow 滑动平均类的保存

    import tensorflow as tf v = tf.Variable(0, dtype=tf.float32, name="v") for variables in tf ...