Skip to content

Instantly share code, notes, and snippets.

@rcotrina94
Last active February 22, 2024 13:29
Star You must be signed in to star a gist
Save rcotrina94/7828886 to your computer and use it in GitHub Desktop.
How to use images for radio buttons (input-radio).
<form>
<p>Previously:</p>
<div>
<input 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 id="visa" type="radio" name="credit-card" value="visa" />
<label class="drinkcard-cc visa" for="visa"></label>
<input id="mastercard" type="radio" name="credit-card" value="mastercard" />
<label class="drinkcard-cc mastercard"for="mastercard"></label>
</div>
</form>
<small><a href="https://github.com/rcotrina94/icons">
&copy; Icons by @rcotrina94 on Github</a></small>
.cc-selector input{
margin:0;padding:0;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
.visa{background-image:url(http://i.imgur.com/lXzJ1eB.png);}
.mastercard{background-image:url(http://i.imgur.com/SJbRQF7.png);}
.cc-selector input:active +.drinkcard-cc{opacity: .9;}
.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;}
// Just, joking... Why use Javascript? You already have CSS3 :)
@MattSidor
Copy link

YAY, beautiful! Thank you for sharing this.

@Phota16
Copy link

Phota16 commented May 11, 2017

it's not working in IE
image

@NatashaKSS
Copy link

Thank you!!

@rcotrina94
Copy link
Author

@NatashaKSS You're welcome! :)

@Bruvisch
Copy link

Is there a way to make this work with razor? Also having trouble with validation when using unobstrusive validation

@wguilherme
Copy link

Hello, firstly thanks.

I'm trying to do this on Ionic v3. I did not make it. Can you help me?

Thanks 👍

@oseiyoke
Copy link

oseiyoke commented Oct 7, 2017

Thank you!

@feLiruc
Copy link

feLiruc commented Nov 10, 2017

The Required Option for this radiobuttons, I don't know why but the tooltip disapear really fast... there's any workaround to solve this?

@bahat
Copy link

bahat commented Nov 17, 2017

First things first, thank you very much for this helpful snippet.
Second, is there a way to make the little annoying radio buttons on the bottom left disappear?
screenshot 1

it's barely visible but it's driving me insane!

@mpcevat
Copy link

mpcevat commented Jan 23, 2018

Thanks! Saved me a lot of work.

@LefterisJP
Copy link

@bahat or anyone else who is faving the problem of the radio buttons on the bottom left of the selected image use:

input[type="radio"]:checked{
    visibility:hidden;
}

@hongcoo
Copy link

hongcoo commented Mar 12, 2018

thank you very much

@melycastp
Copy link

Hi, how can I put this class in differents checkbox-group? Because I have a few check-box in diferent groups and always checked the first group even I check the one that is in second. I'll be grateful if you help me please.

@nperlopez
Copy link

muchas gracias!!!!

@youssef15963
Copy link

Thank you very much

@Deepthivr12
Copy link

anyone please let me know if it can be done in asp.net c#. since here the class is given to each label for a input radio, but in asp.net c# using radiobutton list the labels are populated on itself and its difficult to provide class for the specific labels. Please help

@NVMDSN
Copy link

NVMDSN commented Jan 9, 2019

Hello...Can anybody help me please? I tried several ways to add this to my test site and I'm still seeing the bloody radio buttons instead my images. Thank you :)

@thasneem077
Copy link

thasneem077 commented Feb 21, 2019

@NVMDSN use z-index: -1 for the radio

@cochesaurus
Copy link

Thanks! :)

@lrhorer
Copy link

lrhorer commented Jun 10, 2019

I have been working with this, and I am much closer, but the final solution still eludes me. Instead of a single line of selections, I have 6 lines of identical selections. Only the first line is really working, however. I suspect the "for=" and "id=" tags need to be modified per line, but I have no idea how, or if any consequent lines in the style section need to be added or changed. Each "name=" tag is the same for every field on any given line, of course and unique between lines.

Aquarium

@lrhorer
Copy link

lrhorer commented Jun 11, 2019

I figured it out. The "for=" and "id=" tags must be the same for every button in a single group of radio buttons (defined by the "name=" tag), but they must be different for different groups of radio buttons.

@xerestel
Copy link

Thanks Sir, Great help.

@tavarescarolina
Copy link

It was big help, thanks!

@macior
Copy link

macior commented Apr 4, 2023

Thank you very much, its a great solution. Can you create these solution with tooltips?

@tamara-m
Copy link

Love a pure CSS solution - thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment