CSS 3 Change default radio button style

Français Français

Here’s a simple code snippet that allow to change default radio button design, and set a background image.

Here is a screenshot of the result obtained after modifying the default radio button design.

CSS3 radio button
CSS3 radio button

We only used HTML5 and CSS3 to get this result,  enjoy.

HTML code:

<form>
   <p>Previously:</p>
   <div>
      <input checked="checked"  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 checked="checked" 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>
   <p>A simple mod:</p>
   <div class="cc-selector-2">
      <input id="visa2" type="radio" name="creditcard" value="visa" />
      <label class="drinkcard-cc visa" for="visa2"></label>
      <input  checked="checked" id="mastercard2" type="radio" name="creditcard" value="mastercard" />
      <label class="drinkcard-cc mastercard"for="mastercard2"></label>
   </div>
</form>
<small><a href="https://github.com/rcotrina94/icons">&copy; Icons by <span class="cc">@rcotrina94</span> on <span class="cc">Github </span></a></small>

CSS code:

.cc-selector input{
     margin:0;
    padding:0;
     -webkit-appearance:none;
     -moz-appearance:none;
     appearance:none;
}
 .cc-selector-2 input{
     position:absolute;
     z-index:999;
}
 .visa{
    background-image:url(http://i.imgur.com/lXzJ1eB.png);
}
 .mastercard{
    background-image:url(http://i.imgur.com/SJbRQF7.png);
}
 .cc-selector-2 input:active +.drinkcard-cc, .cc-selector input:active +.drinkcard-cc{
    opacity: .9;
}
 .cc-selector-2 input:checked +.drinkcard-cc, .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;
}
 * {
     font-family:monospace;
}
 .cc-selector-2 input{
     margin: 5px 0 0 12px;
}
 .cc-selector-2 label{
     margin-left: 7px;
}
 span.cc{
     color:#6d84b4 
}