How can I use the image in the user selection option instead of the radio button? That is, if the user clicks on the image, then it should behave like a radio button.

With radio buttons:

enter image description here

Without radio buttons:

enter image description here

The implementations are suitable both with jQuery and pure CSS.

Translation question: Use Image instead of radio button @Vignesh Pichamani

1 answer 1

  <label> <input type="radio" name="fb" value="small" /> <img src="fb1.jpg"> </label>

CSS:

 label > input{ /* HIDE RADIO */ visibility: hidden; /* Makes input not-clickable */ position: absolute; /* Remove input from document flow */ } label > input + img{ /* IMAGE STYLES */ cursor:pointer; border:2px solid transparent; } label > input:checked + img{ /* (RADIO CHECKED) IMAGE STYLES */ border:2px solid #f00; }

Do not forget to add a class to your labels , and in CSS use this class.

Custom styles and animations

Here is an extended version using the <i> and :after pseudo: element :after pseudo:

enter image description here

 body{color:#444;font:100%/1.4 sans-serif;} /* CUSTOM RADIO & CHECKBOXES https://stackoverflow.com/a/17541916/383904 */ .rad, .ckb{ cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .rad > input, .ckb > input{ /* HIDE ORG RADIO & CHECKBOX */ visibility: hidden; position: absolute; } /* RADIO & CHECKBOX STYLES */ .rad > i, .ckb > i{ /* DEFAULT <i> STYLE */ display: inline-block; vertical-align: middle; width: 16px; height: 16px; border-radius: 50%; transition: 0.2s; box-shadow: inset 0 0 0 8px #fff; border: 1px solid gray; background: gray; } /* CHECKBOX OVERWRITE STYLES */ .ckb > i { width: 25px; border-radius: 3px; } .rad:hover > i{ /* HOVER <i> STYLE */ box-shadow: inset 0 0 0 3px #fff; background: gray; } .rad > input:checked + i{ /* (RADIO CHECKED) <i> STYLE */ box-shadow: inset 0 0 0 3px #fff; background: orange; } /* CHECKBOX */ .ckb > input + i:after{ content: ""; display: block; height: 12px; width: 12px; margin: 2px; border-radius: inherit; transition: inherit; background: gray; } .ckb > input:checked + i:after{ /* (RADIO CHECKED) <i> STYLE */ margin-left: 11px; background: orange; } 
 <label class="rad"> <input type="radio" name="r1" value="a" /> <i></i> Radio 1 </label> <label class="rad"> <input type="radio" name="r1" value="b" /> <i></i> Radio 2 </label> <br> <label class="ckb"> <input type="checkbox" value="a" /> <i></i> Checkbox 1 </label> <label class="ckb"> <input type="checkbox" value="b" /> <i></i> Checkbox 2 </label>

jsBin demo 2

Translation of the answer: Use Image instead of radio button @Roko C. Buljan