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:

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.