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

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

在此範例中，我們的目標是設定選取單選按鈕標籤的樣式。但是，提供的 CSS 似乎沒有按預期工作。讓我們分析 HTML 和 CSS 程式碼來確定問題。

HTML 程式碼包含一個帶有「radio-toolbar」類別的 div，其中包含單選按鈕及其標籤。每個單選按鈕都使用 display: none; 隱藏。標籤套用了樣式，包括背景顏色、邊框和填滿。

前往 CSS，第一條規則隱藏單選按鈕輸入，這是正確的。第二個規則設定標籤本身的樣式。問題在於第三條規則，該規則旨在設定所選單選按鈕的標籤樣式。

在第三條規則中，我們嘗試使用以下方法選擇緊鄰選取的單選按鈕的標籤元素選擇器：.radio-toolbar標籤輸入[type =「radio」]：選取。但是，選擇器僅匹配緊鄰的前一個元素。在這種情況下，它期望單選按鈕輸入位於標籤之前，但在 HTML 程式碼中，標籤位於輸入之前。

修正了CSS

要解決此問題，我們可以請改用以下CSS：

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

透過將選擇器改為.radio-toolbar input[type ="radio"]:checked 標籤，我們確保背景顏色應用於選取的單選按鈕輸入後面的標籤。

功能的其他變更

除了選擇器問題之外，我們還可以進行一些其他更改以獲得更好的功能:

1. 標籤建議使用inline -block 來正確對齊。
2. 設定標籤上的 for 屬性和單選按鈕上對應的 id 屬性將正確關聯它們。

這是更新的 HTML和CSS:

HTML:

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

CSS:

.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 中正確設定所選單選按鈕標籤的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！