Question

如何基于checked =“checked”特征为此单选按钮的IMG添加CSS样式？

<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">部分。

Answer 1

您不能仅使用CSS添加类，但可以使用所需的元素：

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

赋予它与所选课程相同的风格。

<强> jsFiddle example

Answer 2

通常，每个浏览器都会使用自己的形状渲染无线电。

您可以使用此功能来帮助设置下面链接顶部的单选按钮：

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

Answer 3

Checked属性本身有资格选择无线电。

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>

如何根据“已检查”值设置无线电输入的样式

3 个答案: