关于input输入框自动填充密码后，出现背景颜色的问题解决

最新推荐文章于 2024-06-18 16:37:00 发布

冰魂破

最新推荐文章于 2024-06-18 16:37:00 发布

阅读量2.1k

点赞数

文章标签： css3 input

本文链接：https://blog.csdn.net/ks8380/article/details/130075263

版权

文章提供了CSS代码段，用于将密码输入框在自动填充时的淡色背景更改为透明。主要涉及的样式属性包括`background-color`、`-webkit-text-fill-color`和`-webkit-box-shadow`，并设置了过渡效果。

摘要由CSDN通过智能技术生成

当我们输入密码，遇到自动填充密码时，点击密码会出现一个淡色的背景颜色，我们需要将其去掉，设置成透明的背景颜色，废话不多说，直接上代码

.shortInput {
            background-color:transparent;
            text-align: center;
            font-size: 20px;
            float: left;
            width: 40px;
            height: 40px;
            color: #333;
            outline: #ff0067;
            border: 1px solid #ccc;
            &:not(:last-child) {
                border-right: none;
            }
            &:first-child {
                border-radius: 5px 0 0 5px;
            }
            &:last-child {
                border-radius: 0 5px 5px 0;
            }
            &:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
                -webkit-text-fill-color: transparent !important;
                -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
                background-color:transparent;
                background-image: none;
                transition: background-color 50000s ease-in-out 0s; //背景色透明 生效时长 过渡效果 启用时延迟的时间
            }
        }