关于css:css设置inputtextarea的光标

36次阅读

共计 641 个字符，预计需要花费 2 分钟才能阅读完成。

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 示例图片

正文完