input光标使用caret-color改变颜色

本文转载自：https://www.zhangxinxu.com/wordpress/2018/01/css-caret-color-first-line/

CSS caret-color属性可以改变输入框插入光标的颜色，同时又不改变输入框里面的内容的颜色。

代码为：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        input{

            color: #333;

            caret-color:red;

        }

    </style>

</head>

<body>

    <input type="text">

</body>

</html>

caret-color属性不仅对于原生的输入表单控件有效，设置contenteditable的普通HTML标签也适用。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        [contenteditable="true"]{

            width: 120px;

            border: 1px solid #ddd;

            padding: 3px;

            line-height: 20px;

            color: #333;

            caret-color: red;

        }

    </style>

</head>

<body>

    <div contenteditable="true">文字</div>

</body>

</html>

兼容性

caret-color属性目前Chrome和Firefox基本上可以放心使用，但是Safari以及IE浏览器还有些问题。

二、其他方法改变输入框的闪烁的光标颜色

对于IE浏览器，其光标颜色看上去是永远固定的黑色，并不跟随输入框的颜色color变化，因此对于IE浏览器，是没有什么好方法的。

但是，对于Safari浏览器，由于输入框控件的闪烁光标颜色是和设置的color属性颜色一致，因此我们是有手段可以对光标进行控制的。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        input {

            color: red;

        }

        input::first-line {

            color: #333;

        }

    </style>

</head>

<body>

    <input type="text">

</body>

</html>

借助::first-line伪元素的方法在Chrome，Safari浏览器下表现良好，但是Firefox浏览器并不支持，其表现为输入框里面的内容不属于::first-line，因此，整个输入框文字都是红色。

对于不支持::first-line方法的浏览器，相关CSS会污染正常的样式表现，因此我们需要区分处理，例如可以这样：

input, input::first-line {

    color: #333;

}

@supports (-webkit-mask: none) {

    input { color: red; }

}

然而这种方法也有局限性，对于这种多行输入控件就无能为力，因为::first-line只能控制首行元素颜色。

三、两种实现方法综合

综合上面两种方法，可以得到最佳实践如下：

如果浏览器支持caret-color属性，优先使用caret-color（Chrome/Firefox/Opera）；其次使用::first-line方法（Safari）；最后忽略（如IE）。

input {

    color: #333;

    caret-color: red;

}

@supports (-webkit-mask: none) and (not (cater-color: red)) {

    input { color: red; }

    input::first-line { color: #333; }

}

后记：珍惜时间，好好加油

---恢复内容结束---

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        input{

            color: #333;

            caret-color:red;

        }

    </style>

</head>

<body>

    <input type="text">

</body>

</html>