美文网首页
input输入框自动填充黄色背景解决方案

input输入框自动填充黄色背景解决方案

作者: _请输入昵称 | 来源:发表于2018-11-22 14:42 被阅读0次

如图,谷歌浏览器中input的自动填充项是黄色,非常不美观


image.png

1、修改背景色

 input:-webkit-autofill,
 textarea:-webkit-autofill,
 select:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 1000px white inset;
 }

2、修改成透明色
https://codepen.io/romulusmaxia/pen/aKKbPm
https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete

        input[type="text"] {
            border: 1px solid #333333 !important;
            padding: 0px 12px 0px 32px;
            background: transparent !important;
        }
        input[type="password"] {
            border: 1px solid #333333 !important;
            padding: 0px 12px 0px 32px;
            background: transparent !important;
        }

        @-webkit-keyframes autofill {
            to {
                color: #666;
                background: transparent;
            }
        }

        input:-webkit-autofill {
            animation-name: autofill !important;
            animation-fill-mode: both !important;
        }

        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus {
            background-clip: content-box !important;
        }
image.png

bingo~

相关文章

网友评论

      本文标题:input输入框自动填充黄色背景解决方案

      本文链接:https://www.haomeiwen.com/subject/ypslqqtx.html