Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
How to use images for radio buttons (input-radio).
<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>
<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>
<small><a href="">
&copy; Icons by @rcotrina94 on Github</a></small>
.cc-selector input{
.cc-selector input:active +.drinkcard-cc{opacity: .9;}
.cc-selector input:checked +.drinkcard-cc{
-webkit-filter: none;
-moz-filter: none;
filter: none;
-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);
-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 */
// Just, joking... Why use Javascript? You already have CSS3 :)
Copy link

taliwalt commented Aug 31, 2015

helpful - thanks!

Copy link

rcotrina94 commented Sep 25, 2015

@taliwalt You're welcome!

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...

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?

Copy link

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 :)

Copy link

hitesh291991 commented Mar 22, 2016

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

Copy link

kh-mubashar commented Jun 14, 2016


Copy link

MattSidor commented Jan 5, 2017

YAY, beautiful! Thank you for sharing this.

Copy link

Phota16 commented May 11, 2017

it's not working in IE

Copy link

NatashaKSS commented Jun 6, 2017

Thank you!!

Copy link

rcotrina94 commented Jun 18, 2017

@NatashaKSS You're welcome! :)

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

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 👍

Copy link

oseiyoke commented Oct 7, 2017

Thank you!

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?

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!

Copy link

mpcevat commented Jan 23, 2018

Thanks! Saved me a lot of work.

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:


Copy link

hongcoo commented Mar 12, 2018

thank you very much

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.

Copy link

nperlopez commented Jun 27, 2018

muchas gracias!!!!

Copy link

youssef15963 commented Jul 10, 2018

Thank you very much

Copy link

Deepthivr12 commented Jan 7, 2019

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

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 :)

Copy link

thasneem077 commented Feb 21, 2019

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

Copy link

cochesaurus commented Jun 4, 2019

Thanks! :)

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.


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.

Copy link

kalamechuki commented Oct 11, 2020

Thanks Sir, Great help.

Copy link

tavarescarolina commented Oct 3, 2021

It was big help, thanks!

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