input:-webkit-autofill 導致chrome的輸入框背景顏色變成黃色


填寫form表單時發現chrome的一個好坑啊!

當你之前有填寫過表單,獲取焦點時,input會有一個記錄之前填寫過的文本的下拉列表式的東東,就像這樣:(抱歉丑了點,隱私問題打上了馬賽克)

按理說,這沒什么問題,很多時候為了方便,也需要它記錄輸入,但是,同時也發現,文本框變成了屎黃色了!而且當你選擇其中的文本時它依然還是屎黃色!

真是卧槽了...... 這完全不是我想要的效果啊,誰願意面對着一坨坨屎黃的東西啊!為什么會這樣?為什么呢?我也不知道,其他瀏覽器不會呀~ 一向以良好形象示人的chrome怎么就變成這樣了呢?

好吧,只能到百度里谷歌一下了!還真不是只有我一個人遇到這樣的問題的!

原來是因為:

看看,不僅input, textarea、select也一樣有,而且只有是“-webkit”啊!看到這個你一定會想到設置background-color來覆蓋它,於是開始巧代碼......折騰幾秒鍾之后,信心滿滿的刷新,你會發現...這並沒有什么卵用啊啊啊~

先不管它他為什么要這樣,大公司的要這么干,你不服能去揍他嗎?!來看看解決辦法!

方法一:

因為這玩意出現只有在之前有輸入記錄的情況下才會出現的,所以只有禁用input的記錄就能ok!比如:<input type="text"  autocomplete="off">,如此當你點擊了input時它就不會有那一列表了!整個世界也就干凈了!當然,如果你能忍受那屎黃色,也可以把它給“on”了,或者不設置,因為autocomplet默認就是'on'的!

不過,很多時候可能需求不允許你去掉簡單方便的記錄!那可咋整?

於是,

方法二:

-webkit-box-shadow: 0 0 0px 1000px white inset  沒錯,就是給input設置內置陰影!而且一定要大,至少要比你的input本身大!不過,box-shadow是很慢的!而且,如果你的input是用圖片做背景的話,是沒有辦法做這么干的!所以在實際開發中,到底是怎么選擇,那還得自己權衡!

當然如果哪位同學有更好的辦法,也希望予以指點!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM