Hi all,

 

I'm making a new site and one feature I found that I liked quite a lot if background radio button images.

 

Here's an example

 

If you scroll to the Budget section you will see what I'm talking about.

 

 

I've been looking online and haven't found much on how to implement this, closest thing I've found is - THIS

 

I've had a look at the code on the example site (first link) and I've added a background image to a radio button, but am stuck on how to keep the new background position in place when the radio button is checked...

 

Any help much appreciated!

 

Al.

 

This isn't a radio button this is in fact an image (a sprite) that has been created and changes when you hover over each of them.

 

There is an active state that gets added onClick()

 

Basically you have the image and change the div's positioning of the image to show the right one at the right time etc

Edited September 6, 201313 yr by junior

Thanks for that junior, I had an idea about that alright, I guess my main question was how was the background image staying in place when the radio button is checked. As you pointed out 'there is an active state that gets added onClick()', that's the part where I get a bit lost

There is a jQuery plugin that you can use to change the appearance of form elements. You can make your own CSS theme.

http://uniformjs.com/

Sorry only getting back to this now, I'll have a look at that site now teodora, thanks for the help.

Finally got it sorted, if anyone is interested here's a development page with it in place - link

I created a CSS-only star rating system using radio buttons on a project for my job. You can see it here:

http://www.wine-and-spirits.se/sv/review/product/list/id/9/#.Ui6mnsYwr_E

 

This was achieved by removing the radio buttons from view- display: none and then giving the corresponding labels a background image. You can still select the radio buttons by clicking on the label.

you can use the :clicked pseudo selector to target the clicked radio button and then the sibling selector ~ to target that element and it's siblings that come after in the dom and change their background position (look up css sprites) to display another image background. The same method was used for the hover event.

The whole process is hard to explain so here is the code:

 

HTML

<div class="rating">
    <em>Betyg</em>
    <input type="radio" name="ratings[3]" id="Betyg_5" value="15" class="radio">
    <label for="Betyg_5" class="star-label"></label>
    <input type="radio" name="ratings[3]" id="Betyg_4" value="14" class="radio">
    <label for="Betyg_4" class="star-label"></label>
    <input type="radio" name="ratings[3]" id="Betyg_3" value="13" class="radio">
    <label for="Betyg_3" class="star-label"></label>
    <input type="radio" name="ratings[3]" id="Betyg_2" value="12" class="radio">
    <label for="Betyg_2" class="star-label"></label>
    <input type="radio" name="ratings[3]" id="Betyg_1" value="11" class="radio">
    <label for="Betyg_1" class="star-label"></label>
</div>

CSS

.rating {
    margin-bottom: 20px;
    width: 180px;
}

.star-label {
    height: 17px;
    width: 15px;
    margin: 0;
    padding: 0 1px;
    float: right;
    background: url("../images/sprite.gif") no-repeat;
    background-position: -32px -222px;
}

.rating:checked ~ label,
.rating:hover label:hover,
.rating:hover label:hover ~ label {
    background-position: 0px -222px;
}

.radio {
    display: none;
}

Thanks for that Robert, I've never seen radio buttons used like that before, very interesting.

 

I'm currently using visibility: hidden for my radio buttons, is there much difference in using display: none over what I am using?

I prefer display:none as with display hidden it is still technically within the flow of the document and thus will still take up the same amount of space.

 

display none removes it from the document flow completely but is still accessible like in my example above. The differences between the two are very similar to that of position: relative and position: absolute, display:hidden performing like the former.

Right, cheers for that Rob!