去掉Webkit(chrome)瀏覽器中input(文本框)或textarea的黃色焦點框


使用Webkit核心的瀏覽器不管對於開發者還是一般用戶都可以說是一個相當優秀的網頁引擎,但是在開發中,讓人感覺很多余的一個特性就是,在表單項中的控件聚焦時總會出現一個黃色邊框,特別是input[text]和textarea,並且在textarea右下角還有一個可用鼠標拖動該表textarea大小的功能。

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


取消表單項聚焦時產生的黃色邊框:
input,button,select,textarea{outline:none}


取消textarea的拖動改變大小的功能:
textarea{resize:none}

最后把以上兩個CSS合並后如下:
input,button,select,textarea{ outline:none;}
textarea{ font-size:13px; resize:none;}


免責聲明!

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



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