Image Radio selection

Suppose I have such kind of situation →

I want that radio buttons should disappear and selection should be done on the basis of selecting Image alone in short no radio button visible?

The usual approach used with the “checkbox hack” is to absolutely position the inputs off-screen, so they still exist, but can’t be seen.

This example uses checkboxes, but i think the same will apply with radios.

.box input {
  position: absolute;
  left: -999em


Here is an old example using radio but still much the same as Sam’s above.

There are issues with android and older ios though.


Hi there codeispoetry,

here is a responsive example that matches your image…

<html lang="en">

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;

input[type="radio"] {
    position: absolute;
    left: -999em;

#label-container {
    max-width: 45em;
    margin: auto;
    overflow: hidden;

#label-container label {
    float: left;
    max-width: 48%;
    margin-bottom: 3%;

#label-container label:nth-child(odd) {
    margin-right: 4%;

#label-container img {
    width: 100%;
    height: auto;


<input id="img1" type="radio" name="r">
<input id="img2" type="radio" name="r">
<input id="img3" type="radio" name="r">

<div id="label-container">
 <label for="img1"><img src="" width="350" height="150" alt="Image 1"></label>
 <label for="img2"><img src="" width="350" height="150" alt="Image 1"></label>
 <label for="img3"><img src="" width="350" height="150" alt="Image 1"></label>




so we should replace →
<label class="check-colour green" for="green"><span>green</span></label>
green by the <img src="">

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.