0

如何根据 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">代码部分。

4

3 回答 3

1

您不能仅使用 CSS 添加类，但您可以使用以下元素定位您想要的元素：

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

赋予它与您选择的班级相同的风格。

jsFiddle 示例

于 2013-04-10T02:46:56.667 回答
0

通常，每个浏览器都以自己的形状呈现收音机。

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

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

于 2013-04-10T02:46:52.993 回答
0

选中的属性本身有资格选择收音机。

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

小提琴

示例 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-10T03:00:20.150 回答