1. 程式人生 > >chrome去除藍色邊框和黃色背景色

chrome去除藍色邊框和黃色背景色

給文字框新增這個樣式屬性就可以解決問題了:outline:none;

2、chrome瀏覽器會自動記錄搜過的關鍵字,在你下次點選文字框準備輸入的時候會以下拉框的形式列出搜尋過的關鍵詞,當你點選列表中的關鍵詞後,選中的關鍵詞會自動填充到文字框中,但是此時,文字框的背景卻發生了變化,變成了偏黃色,那麼如何去掉呢?

這也是由於chrome瀏覽器預設的給自動填充的文字框添加了背景樣式屬性,chrome瀏覽器中檢視元素裡可以看到:


這裡第一想法是直接覆蓋這個background-color,但是貌似不行,可以看到下面我已經覆蓋了background-color這個屬性,可底色還是黃色的:


百度上找到解決方案:新增相關的樣式

  1. input:-webkit-autofill {-webkit-box-shadow: 0 00px1000pxwhiteinset;}  

其實不是遮蔽掉chrome瀏覽器預設新增的背景樣式,而是使用文字框邊框陰影遮住了背景顏色而已。樣式中的1000px即是陰影的寬度,當然,只要這個寬度大於背景顏色的區域即可。

不過這隻適合需要白色底色的情況,若是希望透明色怎麼辦呢?

強制輸入框不能自動搜尋:新增屬性autocomplete='off'