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.

Theme Selector
Multi Language