Custom Forms
For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control.
Checkboxes
This provides us the best control for styling and positioning across browsers and devices.
Intermediate Checkbox
Radios
Inline
Disabled
Custom checkboxes and radios can also be disabled. Add the disabled boolean attribute to the input and the custom indicator and label description will be automatically styled.
Select menu
Other sizing
Range
Create custom input type="range" controls with .custom-range. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only IE and Firefox support “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.
By default, range inputs “snap” to integer values. To change this, you can specify a step value. In the example below, we double the number of steps by using step="0.5".
File browser
The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.