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

如图,谷歌浏览器中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~

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容