Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save thorstensiefert/6df7dd0e34025be772fd to your computer and use it in GitHub Desktop.
Save thorstensiefert/6df7dd0e34025be772fd to your computer and use it in GitHub Desktop.
%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

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.

@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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment