Image instead of Radio button/text?

I have a radiobox selection with 9 options, I would like to replace the button and the text next to it with image.

The selections will show a colour swatch range of 4 colours:

• All
• Black
• Blue
• Chocolate
• Plum
• Green
• Orange
• Magnolia
• Woods

So I need a image of an arrow next to the selected option then the colour range next to it, if the option isn't selected I don't need the arrow (or alternatively a greyed out arrow).

How e开发者_如何学Goasy is would this be?

There are plenty of radio-button replacement libraries out there. For example, Lipidity's "FancyForm" (unfortunately now marked as "obsolete" due to CSS's raw power).

You could do something like this:

• hide the radio button, put the arrow img after it, hide it either
• define the other img (which is the replacement for the text) as a label for the radio button
• using the :checked pseudo-selector and the adjacent sibling selector (+) you can display the arrow img when the radio button is checked

For this solution you do not need Javascript, just HTML and CSS (and as far as I remember IE6 will not understand the selectors used, so you have to fall back to the normal radio button).

UPDATE: IE6< will handle + but only IE8< will handle :checked. I have also created a quick test case which falls back to default radio buttons if the properties are not supported:

<style type="text/css">
    ul,li { margin: 0; padding: 0; list-style: none; }
    .stuffed_radio:enabled { display: none; }
    .stuffed_arrow { display: none; }
    .stuffed_radio:enabled+.stuffed_arrow { visibility: hidden; display: inline-block; }
    .stuffed_radio:checked+.stuffed_arrow { visibility: visible; }
</style>

<ul>
<li>
<input type="radio" id="radio_1" name="baz" class="stuffed_radio" />
<img src="arrow.png" alt="" class="stuffed_arrow" />
<label for="radio_1"><img src="stuff_1.png" alt="" class="stuffed_image" /></label>
</li>
<li>
...
</li>
</ul>