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

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


input输入框自动填充黄色背景解决方案_第1张图片
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;
        }
input输入框自动填充黄色背景解决方案_第2张图片
image.png

bingo~

你可能感兴趣的:(input输入框自动填充黄色背景解决方案)