关于css:css设置inputtextarea的光标

1.1 代码

input,
textarea {
    color: transparent;
    text-shadow: 0 0 0 red;
}

1.2 text-shadow 属性阐明

text-shadow: h-shadow v-shadow blur color;

1.3 示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body {padding: 50px;}

            input,
            textarea {
                color: transparent;
                text-shadow: 0 0 0 red;
            }
        </style>
    </head>
    <body>
        <input type="text" id="input" value="" />
        <br />
        <br />
        <textarea rows="3" cols="50"></textarea>
    </body>
</html>

2.1 代码

caret-color: transparent;

2.2 兼容性

2.3 示例图片

3.1 代码
输入框文本为 #333，光标为 red。

input {
    color: #333;
    caret-color: red;
}
@supports (-webkit-mask: none) and (not (cater-color: red)) {input { color: red;}
    input::first-line {color: #333;}
}

3.2 示例图片

关于css:css设置inputtextarea的光标

1. 不显示光标（办法 1）

2. 不显示光标（办法 2）

3. 不暗藏光标，扭转光标色彩