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.
This provides us the best control for styling and positioning across browsers and devices.
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.
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".