如何在 CSS 中設定選定單選按鈕標籤的樣式？

如何在CSS 中設定選定單選按鈕標籤的樣式

單選按鈕在Web 介面中提供了獨特的交互元素，允許使用者選擇一個來自一組的選項。為了增強其視覺吸引力，通常需要對與所選單選按鈕關聯的標籤進行樣式設定。

問題：

您正在嘗試使用 CSS 將樣式套用到選取單選按鈕的標籤。您目前的程式碼片段包括以下內容：

.radio-toolbar label + input[type="radio"]:checked { 
    background:pink !important;
}

識別問題：

此CSS 選擇器不起作用，因為相鄰同級選擇器“ ”僅匹配它後面的元素的第一個實例。但是，在 HTML 程式碼中，標籤並不緊鄰輸入元素。

解決方案：

要設定所選單選按鈕的標籤樣式， CSS 選擇器必須專門針對與已檢查輸入關聯的標籤元素。這可以使用標籤中的「for」屬性和對應輸入元素中的「id」屬性來實現，如以下程式碼所示：

<div class="radio-toolbar">
  <input type="radio">

.radio-toolbar input[type="radio"] {
  display: none;
}

.radio-toolbar label {
  display: inline-block;
  background-color: #ddd;
  padding: 4px 11px;
  font-family: Arial;
  font-size: 16px;
  cursor: pointer;
}

.radio-toolbar input[type="radio"]:checked+label {
  background-color: #bbb;
}

透過調整CSS 選擇器，程式碼現在可以正確定位所選單選按鈕的標籤並套用所需的樣式。

以上是如何在 CSS 中設定選定單選按鈕標籤的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！