被選中的單選按鈕的樣式標籤，用標籤標籤包裹

如果有人能指出我在正確的方向來解決以下問題，我將不勝感激。被選中的單選按鈕的樣式標籤，用標籤標籤包裹

所以我有這樣的代碼：

<label class="option"><input type="radio" name="rectangle" value="3 1/8 inches" checked><span>d</span> 3 1/8 inches</label>

我想實現的是風格label.option，應根據單選按鈕狀態檢查。什麼是最簡單的方法來實現只使用CSS？

謝謝

來源

2015-05-31 Zeljko Radic

爲什麼標籤內的複選框？你能編輯html嗎？ –

我相信你正在尋找：檢查選擇器。

HTML

<input type="radio" name="rectangle" value="3 1/8 inches" checked> 
<label for="rectangle" class="option"><span>d</span> 3 1/8 inches</label>

CSS

input[type="radio"]:checked + label { 
    color:#ff0000; 
}

來源

2015-05-31 16:04:13 Purify

它只有在標籤跟隨輸入收音機時才起作用。不過，我需要輸入包裹在標籤中。感謝您的建議，但我使用jQuery來解決它。 :) –

也許這樣

input[type="radio"] { 
 
    display: none; 
 
} 
 
span{ 
 
    width: 50px; 
 
    height: 50px; 
 
    display: block; 
 
    border: 2px solid #f00; 
 
} 
 
input[type="radio"]:checked ~ span{ 
 
    background: #f00; 
 
}

<label class="option" for="radio"> 
 
    <input type="radio" id="radio" name="rectangle" value="3 1/8 inches" /><span>d 3 1/8 inches</span></label>

來源

2015-05-31 16:15:15 Dmitriy

謝謝。八九不離十。我想出了使用jQuery。 –

這讓我走上了正軌。感謝您的意見。 –

被選中的單選按鈕的樣式標籤，用標籤標籤包裹

回答

相關問題