Google material style checkbox
This is an example of a web form with a list of checkboxes designed with CSS and HTML. Li" element has been used to arrange the boxes in a list view. The boxes are given the type ‘checkbox'. Variables have been created to define the colors, distances and font size to store values in CSS so variable names could be used repeatedly to avoid setting the same value in different places. Those pre-defined variables are, $baseFontSize: 16, $green: #009688, $blue: #5677fc, $blueDark: #3b50ce, $slideDistance: 100, and $slideDuration: .4s. The background color of the body is set with #009688 whereas the CSS style cursor is set with the value of pointer to make the cursor look like a hand.