天天看點

在chrome浏覽器中,防止input[text]和textarea在聚焦時出現黃色邊框的解決方法

chrome浏覽器不管對于開發者還是一般使用者都可以說是一個相當優秀的網頁浏覽器,但是在開發中,讓人感覺很多餘的一個特性就是,在表單項中的控件聚焦時總會出現一個黃色邊框。

特别是input[text]和textarea,并且在textarea右下角還有一個可用滑鼠拖動該表textarea大小的功能,如下圖所示:

input[text]:

在chrome浏覽器中,防止input[text]和textarea在聚焦時出現黃色邊框的解決方法

textarea:

在chrome浏覽器中,防止input[text]和textarea在聚焦時出現黃色邊框的解決方法

有的時候黃色邊框很影響頁面效果,并且textarea拖動改變大小之後直接影響布局,是以為了不使這些多餘的功能和效果影響頁面,可以使用一下幾句CSS清除掉chrome浏覽器的預設效果,代碼如下:

取消表單項聚焦時産生的黃色邊框:

input,button,select,textarea{outline:none}       

取消textarea的拖動改變大小的功能:

textarea{resize:none}       

合并之後:

input,button,select,textarea{ outline:none;} 
textarea{ font-size:13px; resize:none;}