用css移除Chrome預設input的藍色邊框

用css移除Chrome預設input的藍色邊框

在設計某項專案的時候,發現在chrome瀏覽器上 input:focus //聚焦後,都會有一個藍色邊框出現。

一直以為是border的設定錯誤,可是就算border: none 還是無法解決。

原來chrome並不是設定在border上,而是outline//輪廓元素

解決方式

input:focus {
  outline: none; }