Basic form elements
Styles for basic form elements.
Features
- Elements inherit font styles from their parent element.
- Supports the themes icon font.
- Can have an icon label (left aligned, wrap element in
<label class="icon-…">). - Can have an icon link (right aligned, wrap element in
<label>). - CSS only, no Javascript.
Examples
Text input:
Disabled text input:
Readonly text input:
Wide text input:
Full width text input:
Search input with icon label:
Search input with icon label and placeholder text:
Search input with icon label, placeholder text and icon link:
Password input:
Number input:
Range input:
Range input with data labels:
Email input:
Date input:
Time input:
Date and time input:
Radio buttons:
Checkbox:
Checkbox with label:
Color picker:
Text input and button with icon:
Text input and button with text:
Text input and button with icon label and text:
Text input and submit input button with icon label and text:
Text input and button with icon label in headline:
Headline
Button and link button:
Transparent button and button with right aligned icon:
Colored buttons: Success, error, warning, info:
Button sizes: small (default), medium, large, x large, xx large:
Full width button:
Select:
Select with icon label:
Select with icon label and icon link:
Multiple select:
Multiple select with icon label:
Multiple select with icon label and icon link:
For a more configurable UI, see: Advanced input box
Textarea:
Textarea with icon label:
Textarea with icon link:
Textarea with icon label and icon link:
View source for Html code.
Wrapper element: dark content section
When placed inside a dark content section, form fields will have a different background color:
Text input:
Textarea:
Select:
For more options, see Content section.