CSS 设置文本框光标颜色

本文介绍一下如何设置文本框边框颜色。
使用color属性设置，代码实例如下：

[ 其他 ] 运行代码下载代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<title>CSS 设置文本框光标颜色</title>
<style type="text/css">
input{
  width:180px;
  height:20px;
  color:blue;
}
</style>
</head>
<body>
<input type="text">
</body>
</html>

光标颜色确实是蓝色，但是有个问题，就是文本颜色也是蓝色。
很多时候，可能只需要光标是蓝色的，代码实例如下：

[ 其他 ] 运行代码下载代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<title>CSS 设置文本框光标颜色</title>
<style type="text/css">
input{
  width:180px;
  height:20px;
  caret-color:red;
}
</style>
</head>
<body>
<input type="text">
</body>
</html>

通过caret-color属性即可实现设置功能。
IE和edge浏览器并不支持此属性，好在当前这两个浏览器用户并不是太多。

代码描述：CSS 文本框光标颜色。CSS 设置文本框光标颜色

下载全部收藏

422 562

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册

月映东窗

作品：41 | 粉丝：21

关注

TA的相关作品 >>更多

热搜关键词

CSS 设置文本框光标颜色

设置链接<a>的尺寸

JavaScript html标签转义为实体字符

html标签的尖括号转码为字符实体

JavaScript 获取第n个li元素

position: sticky是否脱离文档流

checked属性值是true还是checked