How to use images for radio buttons (input-radio).

How to use Images as Radio buttons.md

This code how to replace the traditional radio-buttons, for custom images. You can do the same with checkboxes.

• Demo: http://jsfiddle.net/La8wQ/10/
• A mod: http://jsfiddle.net/La8wQ/22/

index.html

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

super-awesome.css

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

useful.js

// Just, joking... Why use Javascript? You already have CSS3 :)

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

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?

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

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

great

YAY, beautiful! Thank you for sharing this.

it's not working in IE

Thank you!!

@NatashaKSS You're welcome! :)

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

Hello, firstly thanks.

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

Thanks 👍

Thank you!

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

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?

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

Thanks! Saved me a lot of work.

@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;
}

thank you very much

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.

muchas gracias!!!!

Thank you very much

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

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

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

Thanks! :)

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.

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.

Thanks Sir, Great help.

It was big help, thanks!

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

Love a pure CSS solution - thank you!