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

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!

Thanks for this piece of awesomeness! Big kudos 💯