為什麼我的自訂按鈕在 Chrome 中具有藍色邊框，如何在保持可訪問性的同時刪除它？

如何從Chrome 中的自訂樣式按鈕中刪除藍色邊框

對於具有自訂設計的網站，開發人員通常會選擇將 樣式設定為元素通過級聯樣式表(CSS)。但是，Chrome 用戶可能會遇到在點擊按鈕時按鈕周圍出現藍色邊框的問題。

重新定義焦點狀態

有問題的藍色邊框是瀏覽器的預設焦點狀態。要刪除它，可以修改輪廓等焦點狀態屬性：

button:focus {
  outline: 0;
}

透過將輪廓屬性設為 0，焦點狀態邊框將被有效停用。

刪除輔助功能回歸警告

需要注意的是，透過設定Outline: 0 來移除焦點狀態可能會妨礙依賴焦點等視覺提示的使用者的可訪問性

為了獲得更好的可訪問性，建議使用以下CSS：

button:focus {
  outline: none;
}

此修改刪除了預設的輪廓樣式並保留了可訪問性。

範例

在提供的CSS中，新增了button:focus規則：

button.launch {
  background-color: #F9A300;
  border: none;
  height: 40px;
  padding: 5px 15px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 300;
  margin-top: 10px;
  margin-right: 10px;
}

button.launch:hover {
  cursor: pointer;
  background-color: #FABD44;
}

button.change {
  background-color: #F88F00;
  border: none;
  height: 40px;
  padding: 5px 15px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 300;
  margin-top: 10px;
  margin-right: 10px;
}

button.change:hover {
  cursor: pointer;
  background-color: #F89900;
}

/* Remove annoying Chrome blue focus border */
button:focus {
  outline: none;
}

這確保了Chrome 中的藍色邊框被刪除，同時保持適當的可訪問性。

以上是為什麼我的自訂按鈕在 Chrome 中具有藍色邊框，如何在保持可訪問性的同時刪除它？的詳細內容。更多資訊請關注PHP中文網其他相關文章！