在使用 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. Linux 文件属性 chgrp、chown、chmod的用法

    Linux 文件属性 ls 是 list 的意思,重点在显示文件的文件名与相关属性.选项 -al 表示列出所有的文件详细的权限与属性(包含隐藏文件,就是文件名第一个字符为 . 的文件) 第一栏代表这个 ...

  2. 如何处理 Web 图片优化?

    未优化的图片是影响网站性能的主要因素之一,尤其会影响初次加载.取决于图像的分辨率和画质,图片可能占据整个网站流量的 70%. 生产环境出现未优化的图片并显著影响初次加载速度的现象还是挺常见的.缺乏经验 ...

  3. eclipse链接mySQL数据库常见错误

    1错误: 解决: 2,用户名输入错误 解决:查看自己的正确用户名https://zhidao.baidu.com/question/248308313.html 3. 解决: 链接示例:https:/ ...

  4. java 面试题 mybatis 篇

    1. 一级缓存和二级缓存? 一级缓存策略: 二级缓存策略: 2. 缓存回收策略 LRU –  最近最少使用的:移除最长时间不被使用的对象. FIFO –  先进先出:按对象进入缓存的顺序来移除它们. ...

  5. java使用bitmap求两个数组的交集

    一般来说int代表一个数字,但是如果利用每一个位 ,则可以表示32个数字 ,在数据量极大的情况下可以显著的减轻内存的负担.我们就以int为例构造一个bitmap,并使用其来解决一个简单的问题:求两个数 ...

  6. Educational Codeforces Round 77 (Rated for Div. 2)D(二分+贪心)

    这题二分下界是0,所以二分写法和以往略有不同,注意考虑所有区间,并且不要死循环... #define HAVE_STRUCT_TIMESPEC #include<bits/stdc++.h> ...

  7. 【CSS属性#2】

    " 目录 一.盒子模型 二.外边距 margin 三.内填充 padding 四.浮动 float 五.清除浮动 clear 六.溢出 overflow 七.定位 position 1. 无 ...

  8. JS中的Boolean对象

    使用new操作符和Boolean(value)构造函数时,得到的并不是原始的true或false,而是一个对象,JS将对象视为真(true) var oBooleanTrue = new Boolea ...

  9. oracle学习笔记(十四) 数据库对象 索引 视图 序列 同义词

    数据库对象 用户模式:指数据库用户所创建和存储数据对象的统称.在访问其它用户模式的数据库对象时需加上用户模式. 如:scott.emp, scott.dept等. 数据库对象包括:表.视图.索引.序列 ...

  10. maven工程引入外部jar包

    pom.xml: <dependency> <groupId>new</groupId> <artifactId>new</artifactId& ...