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
}

https://codepen.io/SamA74/pen/aZObqe

3 Likes

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

https://codepen.io/paulobrien/full/xbJjs/

There are issues with android and older ios though.

3 Likes

Hi there codeispoetry,

here is a responsive example that matches your image…

<!DOCTYPE HTML>
<html lang="en">
<head>

<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;
 }
</style>

</head>
<body> 

<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="http://placehold.it/350x150/e8117f/fff" width="350" height="150" alt="Image 1"></label>
 <label for="img2"><img src="http://placehold.it/350x150/f9a82f/fff" width="350" height="150" alt="Image 1"></label>
 <label for="img3"><img src="http://placehold.it/350x150/49aed7/fff" width="350" height="150" alt="Image 1"></label>
</div>

</body>
</html>

coothead

2 Likes

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

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