Style Radio buttons with CSS and use image

Question

Is there a easy and simple way to style radio buttons with only CSS, so I click an image instead of a bullet? Like thumbs up / thumbs down for example.

I have two radio

Answer 1

Best practice is to simply use the label element like so:

<label id="labelone" for="myradiobutton"></label>

<input type="radio" value="xxx" id="myradiobutton">

Then you use css to style the label. In your case to probably add your image as a background.

Then you just hide the actual radio button by moving it off-screen using absolute positioning. N.B. Don't hide the radio button using the display:none or visibility:hidden as this is bad for accessibility.

So the user will click the label and the radio button which is now off screen will be selected.

Answer 2

I think hiding radio button and use label like you are doing is enough. But may need some correction. "for" attribute in label points to id, not the value you are doing now. And to group the radio button use name, not id like you are doing now.