Custom Checkboxes and Radio Buttons

Custom-Checkboxes-and-Radio-Buttons.markdown

Custom Checkboxes and Radio Buttons

How to Customize Checkbox and Radio Inputs with Custom CSS Source: http://www.wufoo.com/2011/06/13/custom-radio-buttons-and-checkboxes/ Hide the original radios and checkboxes (but still accessible)

:not(#foo) > is a rule filter to block browsers
             that don't support that selector from
             applying rules they shouldn't

A Pen by Eric Rasch on CodePen.

License.

index.html

<h1>Custom Checkboxes and Radio Buttons</h1>

<header id="header" class="info">
  <small>Works in IE9+, Firefox 3.5+, Safari 1.3+, Opera 6+, Chrome anything.</small>
  <small>In browsers where it doesn't "work", it gracefully degrades back to regular checkboxes / radio buttons.</small>
</header>

<hr> 

<form class="form-vertical">

    <div class="control-group">
      <label class="control-label">Radio buttons</label>
      <div class="controls">
          <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="checked">
        <label class="radio" for="optionsRadios1">
          Yes
        </label>
          <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
        <label class="radio" for="optionsRadios2">
          No
        </label>
      </div>
    </div>

</form>

style.less

/*  How to Customize Checkbox and Radio Inputs with Custom CSS
    Source: http://www.wufoo.com/2011/06/13/custom-radio-buttons-and-checkboxes/
    Hide the original radios and checkboxes
    (but still accessible)

    :not(#foo) > is a rule filter to block browsers
                 that don't support that selector from
                 applying rules they shouldn't

*/

.controls {
    display: block;
    margin: 1em 0;
}

div:not(#foo) > input[type='radio'],
div:not(#foo) > input[type='checkbox'] {

    /* Hide the input, but have it still be clickable */
    opacity: 0;

    float: left;
    width: 1px;
}


div:not(#foo) > input[type='radio'] + label,
div:not(#foo) > input[type='checkbox'] + label {
    margin: 0 .2em;
    clear: none;

    /* Left padding makes room for image */
    padding: .5em;

    /* Make look clickable because they are */
    cursor: pointer;

    /*background: url(off.png) left center no-repeat;*/
    background: @color-button;

    .border-radius(3px);
    border: 1px solid @color-button-border;
    color: @color-button-text;
    font-weight: 700;
    text-transform: uppercase;

}

/*
    Change from unchecked to checked graphic
*/
div:not(#foo) > input[type='radio']:checked + label,
div:not(#foo) > input[type='checkbox']:checked + label {
    /*background-image: url(radio.png);*/
    background: @color-button-on;
    box-shadow: inset 2px 2px 1px darken(@color-button-on, 20%);
    color: #fff;
    font-weight: 900;
    text-shadow: 1px 1px 0 darken(@color-button-on, 20%);
}
div:not(#foo) > input[type='checkbox']:checked + label {
    /*background-image: url(check.png);*/
}



/* STOP HERE. The rest of this CSS is for style purposes only and is not needed for the demo to function.
              (but be sure to substitue out the LESS variables/mixins I used above)
   ---------------------------------------------------------------------------------------------------- */

/* =VARIABLES (LESS @variables do not get compiled into the final CSS file)
   ---------------------------------------------------------------------------------------------------- */
@base-background:      #fffaef; /*cream*/
@base-text:            #4f4351; /*purple/grey*/

@color-subtitles:      #9a8864; /*mud*/
@color-highlight:      #e9e59b; /*lime*/

@color-button:         #f2f2f0; /*grey*/
@color-button-text:    darken(@color-button, 50%); /*grey*/
@color-button-border:  darken(@color-button, 10%); /*grey*/
@color-button-on:      #ffa640; /*orange*/


/* =MIXINS
   ---------------------------------------------------------------------------------------------------- */
// Border Radius
.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

// Drop shadows
.box-shadow(@shadow) {
  -webkit-box-shadow: @shadow;
     -moz-box-shadow: @shadow;
          box-shadow: @shadow;
}

// Opacity
.opacity(@opacity) {
  opacity: @opacity / 100;
  filter: ~"alpha(opacity=@{opacity})";
}


/* =BASE STYLES
   ---------------------------------------------------------------------------------------------------- */
body {
    background: @base-background;
    color: @base-text;
    font-family: Arial, Helvetica, sans-serif;
    margin: 5em 2em;
}

h1, h2 {
    color: @base-text;
    letter-spacing: -.05em;
    text-align: center;
    text-shadow: 0 1px 2px fade(lighten(@base-background, 50%), 50%);
}
h1 {
    background: fade(@base-text, 10%);
    border-bottom: 1px solid fade(@base-background, 90%);
    outline: 1px solid fade(@base-text, 20%);
    margin: 0 auto;
    padding: .5em;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

h3, h4, h5 { color: @base-text; }

small, hr {
    display: block;
    margin: 1em 0;
    .opacity(50);
}

.control-label {
    color: @color-subtitles;
    font-size: 1.1em;
    font-weight: 600;
    margin: 1em 0;
}

.control-group {
    background: fade(@color-highlight, 20%);
    .border-radius(4px);
    display: inline-block;
    overflow: hidden;
    padding: 1em;
    width: auto;
}