This code how to replace the traditional radio-buttons, for custom images. You can do the same with checkboxes.
-
Star
(132)
You must be signed in to star a gist -
Fork
(38)
You must be signed in to fork a gist
-
-
Save rcotrina94/7828886 to your computer and use it in GitHub Desktop.
<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"> | |
© 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 :) |
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.
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?
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!
Thanks for this piece of awesomeness! Big kudos 💯
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?