CODEWITHSUNDEEP
cssradio-button
hockey2112
hockey2112

Reputation: 516

How to style Radio input based on "Checked" value

How can I add a CSS style to this Radio button's IMG, based on the checked="checked" characteristic?

<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>

Ideally, I'd like to add a style class "selected" to the <img class="radio_image" src="/sites/default/files/imagecache/radio_thumb/days-3.png"> portion of the code.

Upvotes: 0

Views: 1800

Answers (3)

j08691
j08691

Reputation: 208022

You can't add a class with CSS only, but you could target the element you want with:

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

giving it the same style as your selected class.

jsFiddle example

Upvotes: 1

PSL
PSL

Reputation: 123739

Checked attribute itself qualifies for selection of radio. 

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

Fiddle

Sample 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>

Upvotes: 0

Muhammad Omar ElShourbagy
Muhammad Omar ElShourbagy

Reputation: 7078

Normally, each browser render the radio with its own shape.

you can use this for help styling radio buttons at the top of the below link:

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

Upvotes: 0

Related Questions