Use Images Instead of Radio Buttons

Use images instead of radio buttons

Wrap radio and image in <label>
Hide radio button (Don't use display:none or visibility:hidden since such will impact accessibility)
Target the image next to the hidden radio using Adjacent sibling selector +
Don’t forget to provide alternative text in the alt attribute, especially since it functions as the radio button’s label

/* HIDE RADIO */
[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  outline: 2px solid #f00;
}

<label>
  <input type="radio" name="test" value="small" checked>
  <img src="https://via.placeholder.com/40x60/0bf/fff&text=A" alt="Option 1">
</label>

<label>
  <input type="radio" name="test" value="big">
  <img src="https://via.placeholder.com/40x60/b0f/fff&text=B" alt="Option 2">
</label>

Use images instead of radio buttons (HTML/CSS)

You can used the :checked pseudo-class and sibling selectors to achieve the effect.

So first thing is to move into a structure where inputs are siblings of the labels instead of descendants, and include a "for" attribute that links them

img {  width: 20vw;  height: 20vw;  padding: 2vw;}
input[type=radio] {  display: none;}
img:hover {  opacity:0.6;  cursor: pointer;}
img:active {  opacity:0.4;  cursor: pointer;}
input[type=radio]:checked + label > img {  border: 20px solid rgb(228, 207, 94);}

<input type="radio" name="choice" id="choose-1" value="1"/><label for="choose-1">  <img src="https://placehold.it/200/200/" /></label>
<input type="radio" name="choice" id="choose-2" value="2"/><label for="choose-2">  <img src="https://placehold.it/200/200/" /></label>

How to use images instead of Radio Button

If you changed the input "id" means , change the relevant label "for" too.

For example :

If you change input id as 'visa1' means change the relevant label for="visa1"

<input checked="checked" id="visa1" type="radio" name="credit-card" value="visa" />
<label class="drinkcard-cc visa" for="visa1"></label>

Run the below snippet:

.cc-selector input{    margin:0;padding:0;    -webkit-appearance:none;       -moz-appearance:none;            appearance:none;}
.cc-selector-2 input{    position:absolute;    z-index:999;}
.visa{background-image:url(http://i.imgur.com/lXzJ1eB.png);}.mastercard{background-image:url(http://i.imgur.com/SJbRQF7.png);}
.cc-selector-2 input:active +.drinkcard-cc, .cc-selector input:active +.drinkcard-cc{opacity: .9;}.cc-selector-2 input:checked +.drinkcard-cc, .cc-selector input:checked +.drinkcard-cc{    -webkit-filter: none;       -moz-filter: none;            filter: none;}.drinkcard-cc{    cursor:pointer;    background-size:contain;    background-repeat:no-repeat;    display:inline-block;    width:100px;height:70px;    -webkit-transition: all 100ms ease-in;       -moz-transition: all 100ms ease-in;            transition: all 100ms ease-in;    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);       -moz-filter: brightness(1.8) grayscale(1) opacity(.7);            filter: brightness(1.8) grayscale(1) opacity(.7);}.drinkcard-cc:hover{    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);       -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);            filter: brightness(1.2) grayscale(.5) opacity(.9);}
/* Extras */a:visited{color:#888}a{color:#444;text-decoration:none;}p{margin-bottom:.3em;}* { font-family:monospace; }.cc-selector-2 input{ margin: 5px 0 0 12px; }.cc-selector-2 label{ margin-left: 7px; }span.cc{ color:#6d84b4 }

<form>    <p>Previously:</p>    <div>        <input checked="checked"  id="a1" type="radio" name="a" value="visa" />        <label for="a1">Visa</label><br/>        <input id="a2" type="radio" name="a" value="mastercard" />        <label for="a2">Mastercard</label>    </div>    <p>Now, with CSS3: </p>    <div class="cc-selector">        <input checked="checked" id="visa1" type="radio" name="credit-card" value="visa" />        <label class="drinkcard-cc visa" for="visa1"></label>        <input id="mastercard1" type="radio" name="credit-card" value="mastercard" />        <label class="drinkcard-cc mastercard"for="mastercard1"></label>    </div>        </form><small><a href="https://github.com/rcotrina94/icons">    © Icons by <span class="cc">@rcotrina94</span> on <span class="cc">Github </span></a></small>

How to use an image instead of radio buttons

you can use pseudo element ::before and the content:url(), with this the image will stay on top of the label

input[type="radio"] {  display: none;}input[type="radio"]:checked + label {  position: relative}input[type="radio"]:checked + label::before {  content: url("//lorempixel.com/15/15");  position: absolute;  left:0}

<div class="button">  <input type="radio" name="a" value="a" id="a" />  <label for="a">a</label></div><div class="button">  <input type="radio" name="a" value="b" id="b" />  <label for="b">b</label></div><div class="button">  <input type="radio" name="a" value="c" id="c" />  <label for="c">c</label></div>

Use Images Instead of Radio Buttons

Use images instead of radio buttons

Use images instead of radio buttons (HTML/CSS)

How to use images instead of Radio Button

How to use an image instead of radio buttons

Related Topics

Leave a reply