Form Elements
Cross browser, normalized, responsive forms with minimal styling to allow easy overrides and lean CSS.
Responsive does not require you to add extra classes to style form inputs, instead all valid HTML5 input types have been responsively styled with progressively enhanced fallbacks for unsupported types.
Supported HTML5 types: text, password, email, url, search,
tel, datetime, datetime-local, date, month, time,
week, number, range, and color.
A hook class .readonly can be used to mimic non-editable inputs,
and all fields can be made to display inline by adding the class .inline-block.
Right-to-Left Language Support
Adding the attribute dir="rtl" to the html tag will reverse the layout
of form inputs to allow for right-to-left languages.
Vertical Form
Responsive form elements span 100% by default; their width is designed to be constrained by the existing grid system. This makes them extremely flexible.
Horizontal Form
Grouped Inputs
Inputs can be grouped with prefixes and suffixes attached by wrapping in a container with the
classs .input-group to group them. These groups are fully responsive and will adapt to the full width
of their containing element.
Adding the class .input-group-addon .supplement
to the spans within the input group will style them appropriately.
The Markup
The entire markup for the second form. Note the grid wrappers required for arranging inputs.
<form action="#">
<fieldset>
<legend>Standard Form spanning two columns</legend>
<div class="row">
<div class="col-s-6">
<div class="row">
<div class="col-s-4">
<label for="input2">Text</label>
</div>
<div class="col-s-8">
<input type="text" id="input2" value="standard input...">
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="input-disabled2">Disabled</label>
</div>
<div class="col-s-8">
<input type="text" id="input-disabled2" disabled value="disabled input...">
<p>Support text to help describe the input.</p>
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="input-no-edit2">Non editable</label>
</div>
<div class="col-s-8">
<span id="input-no-edit2" class="readonly">No edit</span>
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="select-default2">Select</label>
</div>
<div class="col-s-8">
<select id="select-default2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="multiple-select-default2">Multiple Select</label>
</div>
<div class="col-s-8">
<select id="multiple-select-default2" multiple="" size="3">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="multiple-select-optgroup-default2">Multiple Select with opt groups</label>
</div>
<div class="col-s-8">
<select id="multiple-select-optgroup-default2" multiple size="5">
<option selected> 1</option>
<optgroup label="Group 1">
<option>1</option>
<option>2</option>
<option>3</option>
</optgroup>
<option> 2</option>
<option> 3</option>
<option> 4</option>
<option> 5</option>
</select>
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="input-file2">File upload</label>
</div>
<div class="col-s-8">
<input id="input-file2" type="file">
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="input-number2">Number</label>
</div>
<div class="col-s-8">
<input type="number" id="input-number2">
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="input-password2">Password</label>
</div>
<div class="col-s-8">
<input type="password" id="input-password2">
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="input-time2">Time</label>
</div>
<div class="col-s-8">
<input type="time" id="input-time2">
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="input-week2">Week</label>
</div>
<div class="col-s-8">
<input type="week" id="input-week2">
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="input-month2">Month</label>
</div>
<div class="col-s-8">
<input type="month" id="input-month2">
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="input-date2">Date</label>
</div>
<div class="col-s-8">
<input type="date" id="input-date2">
</div>
</div>
</div>
<div class="col-s-6">
<div class="row">
<div class="col-s-4">
<label for="input-datetime2">Datetime</label>
</div>
<div class="col-s-8">
<input type="datetime" id="input-datetime2">
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="input-datetime-local2">Datetime Local</label>
</div>
<div class="col-s-8">
<input type="datetime-local" id="input-datetime-local2">
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="input-search2">Search</label>
</div>
<div class="col-s-8">
<input type="search" id="input-search2" placeholder="Search...">
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="input-color2">Color</label>
</div>
<div class="col-s-8">
<input type="color" id="input-color2">
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="input-range2">Range</label>
</div>
<div class="col-s-8">
<input type="range" id="input-range2" min="0" max="100" value="50">
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="input-email2">Email</label>
</div>
<div class="col-s-8">
<input type="email" id="input-email2">
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="check-disabled3">Disabled Checkbox</label>
</div>
<div class="col-s-8">
<input type="checkbox" id="check-disabled3" value="option1" disabled>
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="check3">Checkbox 3</label>
</div>
<div class="col-s-8">
<input type="checkbox" id="check3" value="option1">
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="check4">Checkbox 4</label>
</div>
<div class="col-s-8">
<input type="checkbox" id="check4" value="option2">
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="radio3">Radio 3</label>
</div>
<div class="col-s-8">
<input type="radio" id="radio3" name="radio" value="option2" checked>
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="radio4">Radio 4</label>
</div>
<div class="col-s-8">
<input type="radio" id="radio4" name="radio" value="option1">
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="textarea2">Textarea</label>
</div>
<div class="col-s-8">
<textarea id="textarea2"></textarea>
</div>
</div>
</div>
</div>
</fieldset>
<div class="form-actions">
<button type="submit">Save changes</button>
<button type="button">Cancel</button>
</div>
</form>IOS
On IOS devices the OS chroma is stripped from select and certain input fields allowing them to be styled with the same flexibility of desktop browsers. As such the dropdown indicator needs to be replaced. This is done using a data encoded svg image embedded in the CSS.
The data for this image is as follows:
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMSIgaGVpZ2h0PSIxMC41Ij48cG9seWdvbiBmaWxsPSIjMjIyIiBwb2ludHM9IjExLDAgNS41LDkgMCwwIi8+PC9zdmc+);