html - 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 instead of the buttons, e.g.

Answer 1

• Wrap radio and image in <label>
• Hide radio button (Don't use display:none or visibility:hidden since such will impact accessibility)
• Target the image next to the hidden radio using Adjacent sibling selector +

/* HIDE RADIO */
[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  outline: 2px solid #f00;
}

<label>
  <input type="radio" name="test" value="small" checked>
  <img src="http://placehold.it/40x60/0bf/fff&text=A">
</label>

<label>
  <input type="radio" name="test" value="big">
  <img src="http://placehold.it/40x60/b0f/fff&text=B">
</label>