Use images instead of radio buttons

Question

If I have a radio group with buttons:

... how can I show only images in the select option i

Answer 1

Here is very simple example

input[type="radio"]{
   display:none;
}

input[type="radio"] + label
{
    background-image:url(http://www.clker.com/cliparts/c/q/l/t/l/B/radiobutton-unchecked-sm-md.png);
    background-size: 100px 100px;
    height: 100px;
    width: 100px;
    display:inline-block;
    padding: 0 0 0 0px;
    cursor:pointer;
}

input[type="radio"]:checked + label
{
    background-image:url(http://www.clker.com/cliparts/M/2/V/6/F/u/radiobutton-checked-sm-md.png);
}

  
  
  value 1



  
  
  value 2

Demo: http://jsfiddle.net/La8wQ/2471/

This example based on this trick: https://css-tricks.com/the-checkbox-hack/

I tested it on: chrome, firefox, safari