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

チェックされた属性自体は、無線の選択に適格です。

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 に答える
0

通常、各ブラウザはラジオを独自の形状でレンダリングします。

これは、以下のリンクの上部にあるラジオ ボタンのスタイリングに役立ちます。

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

于 2013-04-10T02:46:52.993 に答える