css如何修改光标颜色(2)-木庄网络博客

2022-02-08 06:10:10 PHP中文网 JavaScript 百度已收录

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            input {
                    color: red;/* 文本颜色和光标颜色设置为 red */
                }
            input::first-line {
                    color: #333;/* 设置文本颜色，将文本颜色和光标颜色区分开来 */
            }
        </style>
    </head>
 
    <body>
        <input class="example" value="自定义光标颜色"><br><br>
 
    </body>
 
</html>

效果图：

借助::first-line伪元素的方法在Chrome，Safari浏览器下表现良好，但是Firefox浏览器并不支持

兼容方式：

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

（学习视频分享：css视频教程）

以上就是css如何修改光标颜色的详细内容，更多文章请关注木庄网络博客！

返回前面的内容