Css——设置input输入框光标颜色
在使用 input 输入框时,我们可能会遇到需要给其设置光标颜色的情况。谷歌浏览器的默认光标颜色是黑色的,GitHub 上的光标却是白色,那么这个用 CSS 怎么改变呢?
上面描述的情景有两种实现方式:
1.使用color来实现
光标的颜色是继承自当前输入框字体的颜色,所以用 color 属性即可改变:
input{
color:red;
}
2.使用caret-color来实现
上一种方式已经修改了光标的颜色但是字体的颜色也改变了,如果只想改变光标的颜色而不改变字体的颜色那就使用 caret-color 属性:
input{
caret-color:red;
}
好了,通过上面的方式我们就可以修改 input 输入框光标颜色了~~~
Css——设置input输入框光标颜色的更多相关文章
- css只改变input输入框光标颜色不改变文字颜色实现方法
input:focus{color:blue}//光标颜色 input{ text-shadow: 0px 0px 0px red;//文字颜色 -webkit-text-fill-color: tr ...
- css设置input不显示光标
把光标颜色设置为透明色和父类一样就看不出来了,就好像取消了 caret-color: transparent; 设置了这个属性后,无论如何点击都好像没有光标似的
- 教你如何使用css隐藏input的光标
今天公司的ui突然跑过来问我一个问题:"如何在不影响操作的情况下,把input的光标隐藏了?". 我相信很多人会跟我一样,觉得这是个什么狗屁需求,输入框不要光标这不是反人类吗?可惜 ...
- CSS设置input placeholder文本的样式
placeholder是HTML5 input的新属性,英文意思是占位符,它一般表示input输入框的默认提示值. 下面是设置placeholder的文本样式的选择器的示例: /* webkit 浏 ...
- 控制input输入框光标的位置
一:理解input, textarea元素在标准浏览器下两个属性selectionStart, selectionEnd. selectionStart: 该属性的含义是 选区开始的位置: selec ...
- vue-element-admin 之改变登录界面input的光标颜色
前话:用框架原有的login更改而不重写的话,恰好当你input背景设置成白色的时候,光标会找不到=>原因:原框架的光标颜色是#fff 操作更改光标颜色: 找到src/views/login/i ...
- css设置input中placeholder字体
设置input中placeholder字体颜色 input::-webkit-input-placeholder {color:@a;} input:-moz-placeholder {color:@ ...
- 怎样使用 CSS 清除 input 输入框聚焦选中时的蓝色边框?
input 输入框的聚焦选中时的边框是由 outline 属性控制的, 直接使用: input { outline: none } 即可. 如下:
- css改变input输入框placeholder值颜色
::-webkit-input-placeholder { /* WebKit browsers */ color: #fff; } :-moz-placeholder { /* Mozilla Fi ...
随机推荐
- Android App测试计划和设计测试矩阵
Android APP :日程管理APP 测试计划(Test Plan): 编号 测试时间 测试类型 测试计划 1. 5.1~5.5 单元测试 单元测试是由程序员自己来完成,程序员有责任编写功能代码, ...
- 【WPF学习】第十四章 事件路由
由上一章可知,WPF中的许多控件都是内容控件,而内容控件可包含任何类型以及大量的嵌套内容.例如,可构建包含图形的按钮,创建混合了文本和图片内容的标签,或者为了实现滚动或折叠的显示效果而在特定容器中放置 ...
- 6_2 铁轨(UVa514)<栈>
在一个叫「堆叠市」的城市中有一个有名的火车站.由于地形限制以及经费的关系,火车站及唯一的铁路的样子如下图: 现在火车从A方向来,预定从B方向离开.火车共有N节车厢(N <=1000),并且各车厢 ...
- java反射--超级好用的方法
1.根据方法名,获取类的对应的方法 Method changeSessionIdMethod = ReflectionUtils.findMethod(HttpServletRequest.class ...
- opencv python:边缘保留滤波(EPF)
EPF:E边缘,P保留,F滤波 import cv2 as cv import numpy as np def bi_demo(image): # bilateralFilter(src, d, si ...
- js遍历传参给html
<p id="subp" hidden><button id= "upsub"shiro:hasPermission="sys:me ...
- 吴裕雄 python 人工智能——智能医疗系统后台用户复诊模块简约版代码展示
#复诊 import sys import os import time import operator import cx_Oracle import numpy as np import pand ...
- 洛谷P1064 金明的预算方案(01背包)
题目描述 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间金明自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:“你的房间需要购买哪些物品,怎么布置,你说了算,只要不超过NNN元钱就行” ...
- ZooKeeper下载安装配置-单机版配置
1,下载地址:http://apache.fayea.com/zookeeper/ 2,检查环境变量(需要确保配置了环境变量): java -version 3,安装配置: (1)解压 tar -zx ...
- 多个python版本共存时,查看pip命令属于哪个python的命令
使用命令: pip -V 或 pip3 -V