如何從 Safari 和 Chrome 中的輸入文字元素中刪除焦點邊框？

消除輸入文字元素焦點邊框

當輸入文字元素獲得焦點時，某些瀏覽器（包括Safari 和Chrome）可能會顯示藍色邊框他們周圍。雖然這種視覺提示對於可訪問性和可用性很有用，但在特定的設計佈局中可能並不總是理想的。

要在 Safari 中刪除此邊框突出顯示，請使用 CSS：

input.middle:focus {
    outline-width: 0;
}

此定位可讓您將所需的輸入元素與「middle」類別隔離。或者，要影響所有表單元素，請使用：

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

Noah Whitmore 建議將其擴展到可內容編輯的元素：

[contenteditable="true"]:focus {
    outline: none;
}

最終，您還可以使用以下方法停用所有元素上的焦點輪廓：

*:focus {
    outline: none;
}

但是，出於可訪問性原因，不鼓勵使用此方法。請記住，焦點輪廓可以作為使用者導航介面的有用指示器。

以上是如何從 Safari 和 Chrome 中的輸入文字元素中刪除焦點邊框？的詳細內容。更多資訊請關注PHP中文網其他相關文章！