Chrome 自动填充的表单是淡黄色的背景,有方法自定义吗


当记住用户名和密码后,下次填写表单时,被记住的部分会呗填充为淡黄色,有些时候不好看,能不能自定义呢,该如何自定义?

chrome HTML css

三千大魔王 10 years, 1 month ago

修改:有辦法直接修改。


 input:-webkit-autofill {
    background-color: rgb(250, 255, 189);
    background-image: none;
    color: rgb(0, 0, 0);
}

貌似不能覆蓋默認樣式,但是可以用別的樣式曲線達到目的。


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

效果:
效果

第一個應用了自定義樣式,第二個作對照。


原先的思路:

屏蔽 Chrome 的功能,自己實現一個,和原生功能模仿得像一點。

好吧,其實你也可以自己繪製 input,將真正的 input 用 css 隱藏起來,就像這樣:


 input#in {
    position: fixed;
    top: -10000px;
}

加載完畢檢測一下 input 有沒有被 chrome 填充,有的話,應用自定義樣式。

這個思路甚至可以更改光標的樣式和顏色,示例如下:
紅色光標

toddy answered 10 years, 1 month ago

Your Answer