100% CSS custom checkboxes and radios

100% CSS custom checkboxes and radios.markdown

100% CSS custom checkboxes and radios

The HTML structure is very specific. It allows for selecting the based on :checked state. Otherwise it's a fairly standard replacement, except it's very capable of being further styled while reacting to :active, :hover, etc.

Requires Bootstrap.

A Pen by Greg Brock on CodePen.

License.

index.html

<div class="container">
  <div class="checkbox">
    <input type="checkbox" value="" id="optionsCheckbox1">
    <label for="optionsCheckbox1">
      <span class="indicator"></span>
      Option one is this and that&mdash;be sure to include why it's great
    </label>
  </div>
  <div class="checkbox disabled">
    <input type="checkbox" value="" id="optionsCheckbox2" disabled>
    <label for="optionsCheckbox2">
      <span class="indicator"></span>
      Option two is disabled
    </label>
  </div>

  <div class="radio">
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    <label for="optionsRadios1">
      <span class="indicator"></span>
      Option one is this and that&mdash;be sure to include why it's great
    </label>
  </div>
  <div class="radio">
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    <label for="optionsRadios2">
      <span class="indicator"></span>
      Option two can be something else and selecting it will deselect option one
    </label>
  </div>
  <div class="radio disabled">
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    <label for="optionsRadios3">
      <span class="indicator"></span>
      Option three is disabled
    </label>
  </div>
</div>

style.less

.checkbox, .radio {
  position: relative;
  
  input {
    opacity: 0;
    position: absolute;
  }
  
  label[for] .indicator {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid #555;
    left: 0;
    text-align: center;
    line-height: 10px;
  }
  
  input[type=checkbox] + label .indicator {
    border-radius: 2px;
  }
  
  input[type=checkbox]:checked + label .indicator {
    &:before {
      content: "\2713";
    }
  }
  
  input[type=radio] + label .indicator {
    border-radius: 50%;
  }
  
  input[type=radio]:checked + label .indicator {
    background-color: #555;
    &:before {
      content: "\2022 ";
      color: #FFF;
    }
  }
}