Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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 :)
@palmoni

This comment has been minimized.

Copy link

palmoni commented Feb 25, 2014

Thank you!

@sancoLgates

This comment has been minimized.

Copy link

sancoLgates commented Feb 11, 2015

Great reference, Thanks!

@rcotrina94

This comment has been minimized.

Copy link
Owner Author

rcotrina94 commented Apr 3, 2015

You're welcome :)

@taliwalt

This comment has been minimized.

Copy link

taliwalt commented Aug 31, 2015

helpful - thanks!

@rcotrina94

This comment has been minimized.

Copy link
Owner Author

rcotrina94 commented Sep 25, 2015

@taliwalt You're welcome!

@jankyzfs

This comment has been minimized.

Copy link

jankyzfs commented Dec 19, 2015

You are rock!!! Im wondering about the same method on a part of image, for example one image and 4 options in this style...

@sonalien

This comment has been minimized.

Copy link

sonalien commented Feb 2, 2016

It doesn't work dynamically. When on using these with asp radio buttons, the id changes on run time and it stops working. Is there any solution?

@rcotrina94

This comment has been minimized.

Copy link
Owner Author

rcotrina94 commented Feb 22, 2016

@jankyzfs You mean a sprite image? :)
@sonalien I'll find some time to make a change to make it work dynamically, meanwhile you can try to find a solution that fits your needs :)

@hitesh291991

This comment has been minimized.

Copy link

hitesh291991 commented Mar 22, 2016

This is not working in master pages of asp.net c# when i click on image there is not checked radio button and not select image plz give me solution..

@kh-mubashar

This comment has been minimized.

Copy link

kh-mubashar commented Jun 14, 2016

great

@MattSidor

This comment has been minimized.

Copy link

MattSidor commented Jan 5, 2017

YAY, beautiful! Thank you for sharing this.

@Phota16

This comment has been minimized.

Copy link

Phota16 commented May 11, 2017

it's not working in IE
image

@NatashaKSS

This comment has been minimized.

Copy link

NatashaKSS commented Jun 6, 2017

Thank you!!

@rcotrina94

This comment has been minimized.

Copy link
Owner Author

rcotrina94 commented Jun 18, 2017

@NatashaKSS You're welcome! :)

@Bruvisch

This comment has been minimized.

Copy link

Bruvisch commented Aug 30, 2017

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

@wguilherme

This comment has been minimized.

Copy link

wguilherme commented Sep 14, 2017

Hello, firstly thanks.

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

Thanks 👍

@oseiyoke

This comment has been minimized.

Copy link

oseiyoke commented Oct 7, 2017

Thank you!

@feLiruc

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

Copy link

mpcevat commented Jan 23, 2018

Thanks! Saved me a lot of work.

@LefterisJP

This comment has been minimized.

Copy link

LefterisJP commented Mar 1, 2018

@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

This comment has been minimized.

Copy link

hongcoo commented Mar 12, 2018

thank you very much

@melycastp

This comment has been minimized.

Copy link

melycastp commented May 30, 2018

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

This comment has been minimized.

Copy link

nperlopez commented Jun 27, 2018

muchas gracias!!!!

@youssef15963

This comment has been minimized.

Copy link

youssef15963 commented Jul 10, 2018

Thank you very much

@Deepthivr12

This comment has been minimized.

Copy link

Deepthivr12 commented Jan 7, 2019

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

This comment has been minimized.

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

This comment has been minimized.

Copy link

thasneem077 commented Feb 21, 2019

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

@cochesaurus

This comment has been minimized.

Copy link

cochesaurus commented Jun 4, 2019

Thanks! :)

@lrhorer

This comment has been minimized.

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

This comment has been minimized.

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.