Pure css Bootstrap checkbox

index.haml

%main
  %h3 Pure css Bootstrap checkbox
  %aside 
  %ul
  - ["Click the label to select", 
  "Using the icon font that Bootstrap provides",
  "Nesting the checkbox inside the label eliminates the need for id's"].each do |text|
    %li
      %label.with-square-checkbox
        %input{:type=> 'checkbox', :checked=> 'true'}
        %span #{text}

Pure-css-Bootstrap-checkbox.markdown

Pure css Bootstrap checkbox

Hide the pure css checkbox and use a pseudo-element to make a fake checkbox.

Pseudo-elements (::after) only work on elements that have content, so won't work on <input> elements. (http://www.w3.org/TR/CSS21/generate.html) Use a span and a ::before pseudo-element to insert a checkbox.

Place the input element inside the label so that clicking the label selects the input. (http://www.w3.org/wiki/HTML/Elements/label)

Using the checkbox Bootstrap provides as a font icon, but you can add any font, graphic or icon you like.

A Pen by GP Gooiker on CodePen.

License.

style.less

@checkbox-height: 21px;

label.with-square-checkbox {
    cursor: pointer;
 
    span {
        line-height: 24px;
        &::before {
              margin-right: 4px;
              padding-left: 1px;
              width: @checkbox-height;
              height: @checkbox-height;
              border: 2px solid grey;
              display: inline-block;
              line-height: 15px;
              content: '';
              float: left;
         }
    }
    input[type="checkbox"] {
        display: none;
        &:checked+span::before {
          font-family: 'Glyphicons Halflings';
          content: '\e013';
          color: hsl(77, 80%, 40%);
        }
    }
}

main {
  width: 300px;
  margin: 8px auto;
}

li {
  list-style-type: none;
}