zoukankan      html  css  js  c++  java

  • 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"]{
             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; }
}

    然而这种方法也有局限性，对于