Radio Button as an Image

Question

Trying to find a simple solution to getting my radio buttons on a select page, to display as images rather than the basic circle thing.

Here's the code that outputs each radio button:

foreach ($context['icons'] as $icon)
echo '<input type="radio" name="icon"  value="', $icon['value'], '"', $icon['value'] == $context['icon'] ? ' checked="checked"' : '', ' /><img src="', $icon['url'], '" alt="', $icon['name'], '" title="', $icon['name'], '" />';

The current output displays each image aside the radio button, which isn't the desired result:

As you can tell, it is for a forum (Simple Machines) and I am yet to find a solution or decent help with this. I'm after something easy to implement, and most likely jQuery oriented.

If you could help, I would appreciate it.

Answer 1

check this shniz out

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-easy-css3-checkboxes-and-radio-buttons/

I think it will help you out

or

html

<input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label>

css

input[type=checkbox] {
    display:none;
  }

  input[type=checkbox] + label
   {
       background: #999;
       height: 16px;
       width: 16px;
       display:inline-block;
       padding: 0 0 0 0px;
   }

   input[type=checkbox]:checked + label
    {
        background: #0080FF;
        height: 16px;
        width: 16px;
        display:inline-block;
        padding: 0 0 0 0px;
    }