在使用 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. maven 配置 阿里云仓库

    随便记录下,以后方便查询 <mirror> <id>nexus-aliyun</id> <mirrorOf>*</mirrorOf> < ...

  2. C#类和对象的理解

    C#是面向对象的开发语言 类:抽象的(模板)不占用内存空间 对象:具体的(真实存在事物)占用内存空间

  3. 6_15 给任务排序(UVa10305)<拓扑排序>

    John有n件事情要做,不幸的是这些事情并不是各自独立的,而是有相依性的.换句话说可能有某件事情一定要在另一件事情做完之后才能做.Input每组测试数据可能有好几列.第一列有2个整数n,m.(1 &l ...

  4. oracle增加字段,循环

    alter table PARAMETETER_CONFIGURATION add (INPUT_IS VARCHAR2(20) ): declare sum_i int:=0; --定义整型变量,存 ...

  5. TOPSIS算法

    title: TOPSIS算法 date: 2020-02-24 11:18:06 categories: 数学建模 tags: [评价模型, MATLAB] mathjax: true 定义 ​ C ...

  6. 消息队列(五)--- RocketMQ-消息存储1

    问题 : 部署时如何知道自己是 broker 还是 NameServer topic 订阅信息放在哪里 broker 的作用到底是什么 纪录是如何持久化的 群发的时候,是如何储存消息的 send 方法 ...

  7. A. Angry Students

    网址:http://codeforces.com/problemset/problem/1287/A It's a walking tour day in SIS.Winter, so tt grou ...

  8. zabbix4.4安装和简要设置

    简介 Zabbix 是一个基于 WEB 界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案.它能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系统管理员快速定位/解决 ...

  9. ASP.NET CORE 基础知识(一):概述【上】

    此为系列文章,对MSDN ASP.NET Core 的官方文档进行系统学习与翻译.其中或许会添加本人对 ASP.NET Core 的浅显理解 原文请参考MSDN ASP.NET Core. 这篇文章是 ...

  10. 使用SSH客户端远程登录Linux主机

    使用SSH客户端远程登录Linux主机(可替代samba.ftp服务) . Linux系统起初就是为多用户而产生的,可以允许多个用户同时登录linux主机各自进行操作,如图1所示: 图1 SSH(Se ...