單擊單選按鈕時如何突出顯示標籤？

我想突出顯示單選按鈕的標籤，當我點擊它時，發現an answer但不起作用。在這裏我的代碼：單擊單選按鈕時如何突出顯示標籤？

HTML

<div class="same-line"> 
    <input type="checkbox" name="417-jornadas-de-g%c3%a9nero-sin-fecha-confirmada" value="Sí" class="checkbox"> 
    <label class="checkbox"> 
    Jornadas de género (sin fecha confirmada)</label> 
    <div class="clear-form"></div> 
</div> 
<div class="same-line"> 
    <input type="checkbox" name="417-curso-de-fotograf%c3%ada-sin-fecha-confirmada" value="Sí" class="checkbox"> 
    <label class="checkbox"> 
    Curso de fotografía (sin fecha confirmada)</label> 
    <div class="clear-form"></div> 
</div>

CSS

.same-line input[type='radio'] { 
    display:none; 
} 

.same-line label[class='checkbox'] { 
    display:inline-block; 
     font-size: 12.2pt; 
} 

.same-line input[type='radio']:checked + label[class='checkbox'] { 
    background-color: #FFBF00 !important; 
}

任何想法？

來源

2012-07-26 Ivanhercaz

哦，那是*我*回答'：）' – 2012-07-26 01:15:53

你測試了什麼瀏覽器？ – 2012-07-26 01:16:13

你沒有任何單選按鈕，你的意思是複選框嗎？ – Musa 2012-07-26 01:19:36

HTML：

（我已經添加上的複選框id屬性，並在標籤上for屬性）

<div class="same-line"> 
    <input type="checkbox" name="417-jornadas-de-g%c3%a9nero-sin-fecha-confirmada" id="cb1" value="Sí" class="checkbox"> 
    <label class="checkbox" for="cb1"> 
    Jornadas de género (sin fecha confirmada)</label> 
    <div class="clear-form"></div> 
</div> 
<div class="same-line"> 
    <input type="checkbox" name="417-curso-de-fotograf%c3%ada-sin-fecha-confirmada" id="cb2" value="Sí" class="checkbox"> 
    <label class="checkbox" for="cb2"> 
    Curso de fotografía (sin fecha confirmada)</label> 
    <div class="clear-form"></div> 
</div>

CSS：

（我已經改變了「無線電「複選框」）

.same-line input[type='checkbox'] { 
    display:none; 
} 

.same-line label.checkbox { 
    display:inline-block; 
     font-size: 12.2pt; 
} 

.same-line input[type='checkbox']:checked + label.checkbox { 
    background-color: #FFBF00; 
}

現場演示：http://jsfiddle.net/PUcmA/1/

來源

2012-07-26 01:23:16

http://jsfiddle.net/hekh8/

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

來源

2012-07-26 01:24:03 Jaspero

HTML：

<div class="same-line"> 
    <input type="checkbox" id="checkbox1" name="417-jornadas-de-g%c3%a9nero-sin-fecha-confirmada" value="Sí" class="checkbox"> 
    <label for="checkbox1"> 
    Jornadas de género (sin fecha confirmada)</label> 
    <div class="clear-form"></div> 
</div> 
<div class="same-line"> 
    <input type="checkbox" id="checkbox2" name="417-curso-de-fotograf%c3%ada-sin-fecha-confirmada" value="Sí" class="checkbox"> 
    <label for="checkbox2"> 
    Curso de fotografía (sin fecha confirmada)</label> 
    <div class="clear-form"></div> 
</div>

CSS：

.same-line input[type='checkbox'] { 
    display:none; 
} 

.same-line label { 
    display:inline-block; 
     font-size: 12.2pt; 
    background-color:#fff; 
} 

.same-line input[type='checkbox']:checked + label { 
    background-color: #ddd; 
}

的jsfiddle：http://jsfiddle.net/heZBT/

來源

2012-07-26 01:26:13 jzm

單擊單選按鈕時如何突出顯示標籤？

回答

相關問題