<!--Icons: Ionicons pack(http://ionicons.com/)
Colors Material: Colors(material.io/guidelines/style/color.html#color-color-palette) -->
<html>
<body>
<h3>CSS Checkboxes and Radio Buttons</h3>
<hr>
<span class="row">
<div>
<p>Check Boxes - 1</p>
<form>
<label>
<input type="checkbox" name="options">
<span class="label-text">Option-1</span>
</label>
<br />
<label>
<input type="checkbox" name="options">
<span class="label-text">Option-2</span>
</label>
<br />
<label>
<input type="checkbox" name="options">
<span class="label-text">Option-3</span>
</label>
</form>
</div>
<div>
<form>
<label>
<input type="checkbox" name="options" disabled>
<span class="label-text">Disabled</span>
</label>
</form>
</div>
</span>
<span class="row">
<div>
<p>Check Boxes - 2</p>
<form>
<label>
<input type="checkbox" name="options">
<span class="label-text2">Option-1</span>
</label>
<br />
<label>
<input type="checkbox" name="options">
<span class="label-text2">Option-2</span>
</label>
<br />
<label>
<input type="checkbox" name="options">
<span class="label-text2">Option-3</span>
</label>
</form>
</div>
<div>
<form>
<label>
<input type="checkbox" name="options" disabled>
<span class="label-text">Disabled</span>
</label>
</form>
</div>
</span>
<span class="row">
<div>
<p>Radio Buttons</p>
<form>
<label>
<input type="radio" name="options">
<span class="label-text">Option-1</span>
</label>
<br />
<label>
<input type="radio" name="options">
<span class="label-text">Option-2</span>
</label>
<br />
<label>
<input type="radio" name="options">
<span class="label-text">Option-3</span>
</label>
</form>
</div>
<div>
<form>
<label>
<input type="radio" name="options" disabled>
<span class="label-text">Disabled</span>
</label>
</form>
</div>
</span>
<p>Follow on:
<a href="https://www.linkedin.com/in/maruti-ram/" target="_blank">
<img src="https://www.ucdmc.ucdavis.edu/chpr/seminars/linked_in.png" alt="linkedIn Logo" height="120" align="middle">
</a>
</p>
</body>
</html>/*Icons: Ionicons pack: http://ionicons.com/*/
/*Colors: Material Colors: material.io/guidelines/style/color.html#color-color-palette*/
@font-face
font-family: "Ionicons"
src: url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1")
src: url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1#iefix") format("embedded-opentype"), url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.ttf?v=2.0.1") format("truetype"), url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.woff?v=2.0.1") format("woff"), url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.svg?v=2.0.1#Ionicons") format("svg")
font-weight: normal
font-style: normal
$background: #E9E9E9
$checkbox-color: #F50057
$text-color: #424242
$disable-color: #BDBDBD
$shadow: #757575
$unchecked: "\f372"
$checked: "\f383"
$checked2:"\f373"
$disabled-checkbox: "\f371"
$radio-unchecked:"\f3a6"
$radio-checked:"\f3a7"
$radio-disabled: "\f35b"
h3
color: #ED494E
font-weight: 500
letter-spacing: 1.5px
text-shadow: 1px 1px 2px #5C5757
text-align: center
margin: 0
padding: 0
hr
width: 20%
border: 0
border-top: 2px solid #494949
margin-bottom: 50px
body
display: block
padding: 1em
font-size: 1.8em
background: $background
color: $text-color
font-family: 'Roboto Slab'
.row
display: inline-block
padding: 1.2em
p
font-size: 0.7em
text-align: center
img
position: relative
top: -8px
div
background: white
display: block
padding: 0.7em
box-shadow: 5px 2px 8px $shadow
border-bottom: 1px solid $text-color
width: 100%
position: relative
p
background: darken($checkbox-color, 3%)
font-size: 0.65em
margin: 0
padding: 0.25em
letter-spacing: 1.5px
position: absolute
left: 0
top: -25px
color: white
box-shadow: 1px 2px 4px $shadow
z-index: 2
label
cursor: pointer
input[type="checkbox"]
display: none
+ .label-text:before
font-family: "Ionicons"
content: $unchecked
color: $checkbox-color
display: inline-block
padding-right: 0.3em
&:checked + .label-text::before
content: $checked
padding-right: 0.3em
color: $checkbox-color
animation: check 0.2s ease-in-out
&:disabled + .label-text
color: $disable-color
cursor: not-allowed
&:before
content: $disabled-checkbox
cursor: not-allowed
color: $disable-color
+ .label-text2::before
font-family: "Ionicons"
content: $unchecked
color: $checkbox-color
display: inline-block
padding-right: 0.3em
&:checked + .label-text2::before
content: $checked2
padding-right: 0.3em
color: $checkbox-color
animation: check2 0.2s ease-in-out
&:disabled + .label-text2
color: $disable-color
cursor: not-allowed
&:before
content: $disabled-checkbox
cursor: not-allowed
color: $disable-color
input[type="radio"]
display: none
+ .label-text:before
font-family: "Ionicons"
content: $radio-unchecked
color: $checkbox-color
display: inline-block
padding-right: 0.3em
&:checked + .label-text::before
content: $radio-checked
padding-right: 0.3em
color: $checkbox-color
animation-fill-mode: forwards
animation: radio 150ms ease-in
&:disabled + .label-text
color: $disable-color
cursor: not-allowed
&:before
content: $radio-disabled
cursor: not-allowed
color: $disable-color
@keyframes check
0%
transform: scale(0)
80%
transform: scale(1.2)
100%
transform: scale(1)
@keyframes check2
0%
transform: scale(0)
100%
transform: scale(1)
@keyframes radio
0%
transform: scale(0.1)
60%
transform: scale(0.5)
100%
transform: scale(1)
/*Icons: Ionicons pack(http://ionicons.com/)
Colors Material: Colors(material.io/guidelines/style/color.html#color-color-palette)*/
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.