纯css改变input的光标颜色，字体颜色不变(设置光标颜色与字体颜色不同)

最新推荐文章于 2024-05-13 10:46:20 发布

云_飞扬

最新推荐文章于 2024-05-13 10:46:20 发布

阅读量2.6k

点赞数

分类专栏： css 文章标签：表单表单样式浏览器默认样式

本文链接：https://blog.csdn.net/qq_38627581/article/details/80243477

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

使用input输入框时，默认光标颜色是和字体颜色相同的，只需css设置color属性就可以同时改变光标和字体颜色

但有时的需求是光标和字体颜色不一样，网上的caret方法经测试chrome并不管用，所以，代码如下

<!DOCTYPE html> 
<html> 
    <head lang="en">
        <meta charset="UTF-8">
        <title>改变input按钮的光标颜色,不改变字体颜色</title>
        <style>
            #input1 {
                color: #000;
            }
            #input2 {
                /*改变光标颜色*/
                color: red;
                text-shadow: 0px 0px 0px #000;
                -webkit-text-fill-color: transparent;
            }
        </style>
    </head>
    <body>
        设置color颜色，光标颜色和字体颜色相同<input id="input1" type="text"/>
        <br/>
        <br/>
        只改变光标颜色，不改变字体颜色: <input id="input2" type="text"/>
    </body>
</html>

兼容性：测试了chrome和ie浏览器，chrome下生效，ie下无效

如果大家有好的方法，欢迎留言~~

云_飞扬

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
纯css改变input的光标颜色，字体颜色不变(设置光标颜色与字体颜色不同)

使用input输入框时，默认光标颜色是和字体颜色相同的，只需css设置color属性就可以同时改变光标和字体颜色但有时的需求是光标和字体颜色不一样，网上的caret方法经测试chrome并不管用，所以，代码如下改变input按钮的光标颜色,不改变字体颜色 #input1 {
复制链接

扫一扫