在使用 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. IDE - IDEA - 快捷键整理 - 01. Navigation

    1. 概述 工具的熟练程度, 会决定工作效率 总共也就 140 条左右吧 需要讲解吗? 2. ref 1. idea 自带的 ReferenceCard.pdf 3. keymap 1. 文件移动 C ...

  2. 最全的 eclipse web 项目目录结构以及Tomcat的各个目录的作用

    本文会尽可能对 java web 项目的目录结构做出最详细的解释,尽量做到浅显易懂. eclipse web 项目目录结构   java web 项目事例 03-springmvc-drien-xgq ...

  3. Centos6.10-FastDFS-Storage-Nginx配置

    nginx+fastdfs-nginx-module 安装此处省略. 1.进入工作目录 cd /usr/local/nginx/conf 2.创建子目录 mkdir configs 3.创建stora ...

  4. mybatis-01-简单概述基础点

    1.mybatis的优点 mybatis:半自动化持久化框架 sql(专注数据)和java编码(专注业务)分离 可使用简单的xml或者注解用于配置和原始映射 将接口和java中的pojo映射成数据库中 ...

  5. denied: requested access to the resource is denied 解决办法

    往 dockerhub 上 push 本地镜像的时候 出现了下面这个提示: denied: requested access to the resource is denied 解决办法: 在 dod ...

  6. php 发送手机验证码

    嗯哼,做为一个好的程序猿,一定要给顾客爸爸剁手的时候,充分的告诉他,你剁完手了,所以不只有邮件通知还要有手机短信的通知,今天就来写一下php发送验证码 1.首先我就写了几个个方法,因为配置在后台,直接 ...

  7. EVE扩大虚拟内存

    1.首先通过df -lh命令查看虚拟机的根目录下是否有足够大的硬盘空间. root@eve-ng:~# df -hFilesystem                    Size  Used Av ...

  8. BZOJ5319/LOJ2551「JSOI2018」列队

    问题描述 作为一名大学生,九条可怜在去年参加了她人生中的最后一次军训. 军训中的一个重要项目是练习列队,为了训练学生,教官给每一个学生分配了一个休息位置.每次训练开始前,所有学生都在各自的休息位置休息 ...

  9. 解决STM32工程出现:Undefined symbol TIM_ClearFlag (referred from hcsr04.o).错误。类型问题Undefined symbol TIM_xxx (referred from xxx.o).

    出错原因: 工程FWLIB目录下没有添加stm32f10x_tim.c文件. 添加即可. 一般利用库开发,将ppp.c(ppp.c又调用了库stm32f10x_xx.h)写好之后的调用步骤: 举例使用 ...

  10. 「CF1042F」Leaf Sets

    传送门 Luogu 解题思路 比较显然的一种做法: 我们把一个点的子树高度抠出来并排序记为 \(L_i\),找到最大的 \(i\) 使得 \(L_{i-1}+L_i\le K\). 于是我们把前 \( ...