CSS改变input输入框闪烁光标的颜色
第一种
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>改变输入框光标颜色</title><style>input { color: #333; care...
第一种
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>改变输入框光标颜色</title>
<style>
input {
color: #333;
caret-color: red;
}
</style>
</head>
<body>
<!-- Safari以及IE浏览器有兼容问题 -->
<input value="改变输入框光标颜色">
</body>
</html>
第二种
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>改变输入框光标颜色</title>
<style>
.input {
color: red;
}
.input::first-line {
color: #333;
}
</style>
</head>
<body>
<!-- Safari以及IE浏览器有兼容问题 -->
<input value="改变输入框光标颜色" class="input" />
</body>
</html>
第三种
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>最终版--改变输入框光标颜色</title>
<style>
.center {
color: #333;
caret-color: red;
}
@supports (-webkit-mask: none) and (not (caret-color: red)) {
.center { color: red; }
.center::first-line { color: #333; }
}
</style>
</head>
<body>
<input value="混合兼容处理" class="center" />
</body>
</html>
- 发表于 2020-06-26 14:37
- 阅读 ( 542 )
- 分类：web前端开发
