CODEWITHSUNDEEP
htmlformscssradio-button
user934902
user934902

Reputation: 1204

Trying to Style Radio button (using background-image)

I am trying to style a radio button, I am replacing the circle with a background image, when the user clicks it the container the button is in is supposed to have an inner box shadow appear.

I styled the spans grey for simplicity, assume the grey color is a background-image

Fiddle: http://jsfiddle.net/CF5qc/

HTML

<div class="contain">
<span>
    <input type="radio" name="test" value="1">
    <label></label>   
</span>
<span>
    <input type="radio" name="test" value="2">
    <label></label>   
</span>
<span>
    <input type="radio" name="test" value="3">
    <label></label>  
</span>
</div>

CSS

.contain { width: 300px; margin: 10px auto; overflow:hidden;border: 1px solid #e5e5e5; }
span { 
    display:block; width:100px; height:100px; border-right: 1px solid #e5e5e5;
    -webkit-box-sizing: border-box; -moz-box-sizing:border-box; box-sizing: border-box; float:left;
}
span:last-of-type { border:none; }
input { width:20px;height:20px;margin:40px; }
input[type=radio]{display:none;}
label {
width:100%;height:100%;display:block; background-color: #f8f8f8; cursor:pointer;
}
input[type=radio]:checked + label {
    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
    -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
    box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
}

Upvotes: 1

Views: 9284

Answers (1)

David Millar
David Millar

Reputation: 1878

Your labels aren't associated with any elements. To make this trick work, you'll need to assign the radio buttons an ID and use the for attribute on the labels to pair them up.

<input type="radio" name="test" value="1" id="rb1" checked />
<label for="rb1"></label>

Upvotes: 1

Related Questions