Form Elements
Cross browser, normalized, responsive forms with minimal styling to allow easy overrides and lean CSS.
All inputs are responsive with progressively enhanced fallbacks for unsupported types. A hook class .no-edit can be used to mimic non-editable inputs,
and all fields can be made to display inline by adding the class .inline-block.
Smaller elements such as radio and checkbox inputs can be aligned by wrapping them in an element with the class .input-group.
Standard
Responsive form elements span 100% by default; their width is designed to be constrained by the existing grid system. This makes them extremely flexible.
The Markup
The entire markup for the first 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="input9">Standard</label>
</div>
<div class="col-s-8">
<input type="text" id="input9" class="focus" value="standard input...">
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="input-disabled9">Disabled</label>
</div>
<div class="col-s-8">
<input type="text" id="input-disabled9" 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-edit9">Non editable</label>
</div>
<div class="col-s-8">
<span id="input-no-edit9" class="no-edit">No edit</span>
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="select-default9">Select</label>
</div>
<div class="col-s-8">
<select id="select-default9">
<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="input-file9">File upload</label>
</div>
<div class="col-s-8">
<input id="input-file9" type="file">
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="input-number9">Number</label>
</div>
<div class="col-s-8">
<input type="number" id="input-number9">
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="input-password9">Password</label>
</div>
<div class="col-s-8">
<input type="password" id="input-password9">
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="input-time9">Time</label>
</div>
<div class="col-s-8">
<input type="time" id="input-time9">
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="input-week9">Week</label>
</div>
<div class="col-s-8">
<input type="week" id="input-week9">
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="input-month9">Month</label>
</div>
<div class="col-s-8">
<input type="month" id="input-month9">
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="input-date9">Date</label>
</div>
<div class="col-s-8">
<input type="date" id="input-date9">
</div>
</div>
</div>
<div class="col-s-6">
<div class="row">
<div class="col-s-4">
<label for="input-datetime9">Datetime</label>
</div>
<div class="col-s-8">
<input type="datetime" id="input-datetime9">
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="input-datetime-local9">Datetime Local</label>
</div>
<div class="col-s-8">
<input type="datetime-local" id="input-datetime-local9">
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="input-search9">Search</label>
</div>
<div class="col-s-8">
<input type="search" id="input-search9">
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="input-color9">Color</label>
</div>
<div class="col-s-8">
<input type="color" id="input-color9">
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="input-range9">Range</label>
</div>
<div class="col-s-8">
<input type="range" id="input-range9" min="0" max="100" value="50">
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="input-email9">Email</label>
</div>
<div class="col-s-8">
<input type="email" id="input-email9">
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="check-disabled9">Disabled Checkbox</label>
</div>
<div class="col-s-8">
<input type="checkbox" id="check-disabled9" value="option9" disabled="" class="inline-block">
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="check9">Checkbox</label>
</div>
<div class="col-s-8">
<input type="checkbox" id="check9" value="option1" class="inline-block">
<input type="checkbox" id="check10" value="option9" class="inline-block">
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="radio9">Radio</label>
</div>
<div class="col-s-8">
<input type="radio" id="radio9" name="radio" value="option1" class="inline-block">
<input type="radio" id="radio10" name="radio" value="option9" class="inline-block">
</div>
</div>
<div class="row">
<div class="col-s-4">
<label for="textarea9">Textarea</label>
</div>
<div class="col-s-8">
<textarea id="textarea9"></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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMC4wMzEiIGhlaWdodD0iMTAuNSI+PHBvbHlnb24gZmlsbD0iIzIyMiIgcG9pbnRzPSIxMSwwIDUuNSw5IDAsMCIvPjwvc3ZnPg==);