如何僅使用 CSS 設定選取單選按鈕標籤的樣式？

設定選取單選按鈕標籤的樣式

在CSS 中，可以將樣式套用於與選取單選按鈕關聯的標籤，即使不使用額外的div 等元素。

鄰近兄弟姊妹組合器

要定位緊接著選取的單選按鈕輸入的標籤，請使用 CSS 相鄰同級組合器 ( )。此組合器會匹配與特定元素相鄰並跟隨其後的標籤。

語法：

input[type="radio"]:checked + label {
  /* Styles */
}

範例：

考慮以下HTML標記：

<input>

使用相鄰同級組合器，您可以設定選取的單選按鈕的標籤樣式，如下所示：

input[type="radio"]:checked + label {
  font-weight: bold;
}

結果：

選擇單選按鈕後，對應的標籤將變成粗體，表示其選取狀態。此技術可以與各種 CSS 屬性一起使用來自訂選取的單選按鈕的外觀。

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