CSS 设置文本框光标颜色

有影 2019-11-18 229 阅读

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.cxvn.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.cxvn.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浏览器并不支持此属性,好在当前这两个浏览器用户并不是太多。

最新游戏