css设置input/textarea的光标

站长

2022年09月08日 21:11 · 阅读数 103

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

1.1 代码

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

1.2 text-shadow 属性说明

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

css设置input/textarea的光标

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>

css设置input/textarea的光标

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

2.1 代码

caret-color: transparent;

2.2 兼容性 css设置input/textarea的光标

2.3 示例图片 css设置input/textarea的光标

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设置input/textarea的光标

转载自:https://segmentfault.com/a/1190000041253418