去掉input標籤獲得焦點後的邊框

admin發表於2017-12-04

網頁中的經常使用文字框，尤其是在表單中，大家可能會發現這個一個特點，在Webkit核心的瀏覽器中，當文字框獲得焦點的時候，會出現一個帶有顏色的邊框，但是在實際應用中往往不需要這個邊框，可能第一印象就是將input元素的邊框設定為0，如下程式碼:

[CSS] 純文字檢視 複製程式碼
input{
  border:0;
  width:100px;
  height:25px;
}

沒有達到預期的效果。要想去掉這個邊框只要為input元素新增一個outline:none即可，程式碼如下:

[CSS] 純文字檢視 複製程式碼
input{
  outline:none;
  width:100px;
  height:25px;
}

新增outline:none之後即可去掉那個帶有顏色的邊框。


相關文章