如何根據「檢查」值設置無線電輸入的樣式

如何根據checked =「checked」特性將CSS樣式添加到此單選按鈕的IMG？如何根據「檢查」值設置無線電輸入的樣式

<div id="edit-attributes-24-42-wrapper" class="form-item"> 
    <label for="edit-attributes-24-42" class="option"> 
    <input type="radio" class="form-radio" checked="checked" value="42" name="attributes[24]" id="edit-attributes-24-42"> 
    <img class="radio_image" src="/sites/default/files/imagecache/radio_thumb/days-3.png"> 
    <div class="radio_image_text"> 
     Radio Button text, hidden by display:none in CSS 
    </div>  
    </label> 
</div>

理想情況下，我想「選擇」的樣式類添加到代碼的<img class="radio_image" src="/sites/default/files/imagecache/radio_thumb/days-3.png">部分。

來源

2013-04-10 hockey2112

經過屬性本身有資格獲得無線電的選擇。

input.form-radio:checked + img { 
    border:5px solid; 
}

Fiddle

樣本HTML

<div id="edit-attributes-24-42-wrapper" class="form-item"> 
    <label for="edit-attributes-24-42" class="option"> 
     <input type="radio" class="form-radio" value="42" name="attributes[24]" id="edit-attributes-24-42"> 
     <img class="radio_image" src="/sites/default/files/imagecache/radio_thumb/days-3.png"> 
     <div class="radio_image_text">Radio Button text, hidden by display:none in CSS</div> 

     <input type="radio" class="form-radio" value="42" name="attributes[24]" id="edit-attributes-24-42"> 
     <img class="radio_image" src="/sites/default/files/imagecache/radio_thumb/days-3.png"> 
     <div class="radio_image_text">Radio Button2 text, hidden by display:none in CSS</div> 

    </label> 
</div>

來源

2013-04-10 03:00:20 PSL

完美！我只是將它添加到我的CSS中，它在FF，Chrome和IE中非常好用！謝謝！ – hockey2112 2013-04-10 03:56:51

很高興幫助！ :) – PSL 2013-04-10 04:01:05

還有一個問題......如果我想讓「checked」屬性代替向form-item div（最上面的div）添加一個類，我將如何修改CSS？ – hockey2112 2013-04-10 14:59:55

通常，每個瀏覽器都會使用自己的形狀呈現無線電。

您也可以通過以下鏈接的頂部使用此求助造型單選按鈕：

http://metroui.org.ua/forms.php

來源

2013-04-10 02:46:52

不能添加僅適用於CSS類，但您可以指定要與元素：

input[checked=checked] + img{ 
    /* style here */ 
}

給它與您選擇的類相同的風格。

jsFiddle example

來源

2013-04-10 02:46:56 j08691

如何根據「檢查」值設置無線電輸入的樣式

回答

相關問題