A simple CSS implementation of a material design checkbox. Tested in Chrome, Safari, Internet Explorer 11 and Firefox. No JavaScript needed.
A Pen by Hannes Kamecke on CodePen.
<section> | |
<h1>Simple material design CSS only checkbox example</h1> | |
<div class="md-checkbox"> | |
<input id="i2" type="checkbox" checked> | |
<label for="i2">Item 1</label> | |
</div> | |
<div class="md-checkbox"> | |
<input id="i1" type="checkbox"> | |
<label for="i1">Item 2</label> | |
</div> | |
<div class="md-checkbox"> | |
<input id="i3" type="checkbox"> | |
<!-- Use label even if no text required --> | |
<label for="i3"></label> | |
</div> | |
<div class="md-checkbox"> | |
<input id="i4" type="checkbox" disabled="disabled" checked> | |
<label for="i4">Disabled</label> | |
</div> | |
<div class="md-checkbox"> | |
<input id="i5" type="checkbox" disabled="disabled"> | |
<label for="i5">Disabled</label> | |
</div> | |
<div style="text-align:center"> | |
<div class="md-checkbox md-checkbox-inline"> | |
<input id="i10" type="checkbox"> | |
<label for="i10">Inline & Centered</label> | |
</div> | |
</div> | |
<div> | |
<p> | |
Checkboxes use relative units and will scale to | |
your font size. By default the checkbox size is | |
set to 1.25em ($md-checkbox-size). | |
</p> | |
<div class="md-checkbox" style="font-size:20px"> | |
<input id="i12" type="checkbox" checked> | |
<label for="i12">Scales with font size</label> | |
</div> | |
</div> | |
</section> |
A simple CSS implementation of a material design checkbox. Tested in Chrome, Safari, Internet Explorer 11 and Firefox. No JavaScript needed.
A Pen by Hannes Kamecke on CodePen.
@import url(https://fonts.googleapis.com/css?family=Roboto); | |
$md-checkbox-checked-color: rgb(51, 122, 183); | |
$md-checkbox-border-color: rgba(0, 0, 0, 0.54); | |
$md-checkbox-border-color-disabled: rgba(0, 0, 0, 0.26); | |
$md-checkbox-checked-color-disabled: rgba(0, 0, 0, 0.26); | |
$md-checkbox-margin: 1em 0; | |
$md-checkbox-size: 1.25em; | |
$md-checkbox-padding: .25em; | |
$md-checkbox-border-width: 2px; | |
$md-checkbox-border-radius: 0.125em; | |
$md-checkmark-width: 0.125em; | |
$md-checkmark-color: #fff; | |
$md-checkbox-label-padding: .75em; | |
.md-checkbox { | |
position: relative; | |
margin: $md-checkbox-margin; | |
text-align: left; | |
&.md-checkbox-inline { | |
display: inline-block; | |
} | |
label { | |
cursor: pointer; | |
display: inline; | |
line-height: $md-checkbox-size; | |
vertical-align: top; | |
clear: both; | |
padding-left: 1px; | |
&:not(:empty) { | |
padding-left: $md-checkbox-label-padding; | |
} | |
&:before, &:after { | |
content: ""; | |
position: absolute; | |
left: 0; | |
top: 0; | |
} | |
&:before { | |
// box | |
width: $md-checkbox-size; | |
height: $md-checkbox-size; | |
background: #fff; | |
border: $md-checkbox-border-width solid $md-checkbox-border-color; | |
border-radius: $md-checkbox-border-radius; | |
cursor: pointer; | |
transition: background .3s; | |
} | |
&:after { | |
// checkmark | |
} | |
} | |
input[type="checkbox"] { | |
outline: 0; | |
visibility: hidden; | |
width: $md-checkbox-size; | |
margin: 0; | |
display: block; | |
float: left; | |
font-size: inherit; | |
&:checked { | |
+ label:before{ | |
background: $md-checkbox-checked-color; | |
border:none; | |
} | |
+ label:after { | |
$md-checkmark-size: $md-checkbox-size - 2 * $md-checkbox-padding; | |
transform: translate($md-checkbox-padding, ($md-checkbox-size / 2) - ($md-checkmark-size / 2.6)) rotate(-45deg); | |
width: $md-checkmark-size; | |
height: $md-checkmark-size / 2; | |
border: $md-checkmark-width solid $md-checkmark-color; | |
border-top-style: none; | |
border-right-style: none; | |
} | |
} | |
&:disabled { | |
+ label:before{ | |
border-color: $md-checkbox-border-color-disabled; | |
} | |
&:checked { | |
+ label:before{ | |
background: $md-checkbox-checked-color-disabled; | |
} | |
} | |
} | |
} | |
} | |
// ************************************* | |
// ************************************* | |
*, *:before, *:after { | |
box-sizing: border-box; | |
} | |
body { | |
background:#f0f0f0; | |
position: absolute; | |
width:100%; | |
padding:0; | |
margin:0; | |
font-family: "Roboto", sans-serif; | |
color: #333; | |
font-size: 16px; | |
} | |
section { | |
background:white; | |
margin:0 auto; | |
padding: 4em; | |
max-width: 800px; | |
h1 { | |
margin: 0 0 2em; | |
} | |
} |