2 #forms Forms
Covers styles used for forms, such as the <input>
and <select>
elements.
Example
<form>
<p><input type="text" class="" value="Text input"/></p>
<div class="mod-input text ">
<label>Text Label</label>
<input type="text" class="" value="Text input"/></div>
<p>
<a href="#" class="button ">Link Button</a>
<button class="button ">Button Element</button>
<input type="button" class="button " value="input[type='button']"/>
</p>
</form>
2.1 #forms.text Text Input
Below are the text-oriented form elements used on the site.
2.1.1 #forms.text.single-line Single-Line Text Boxes
Your standard, everyday text boxes.
Examples
Default styling
:hover
Highlight the text box when hovering
:focus
Similar to
:hover
, however it should demand more attention than when an input is simply hovered.
:disabled
When disabled, the input's appearance should reflect as such.
<input type="text" class="" value="Text input"/>
2.1.2 #forms.text.label-pairs Label/Textbox Pairs
All labelled textboxes should be included in a wrapper <div>
element for
both layout convenience and specific styling.
Examples
Default styling
.disabled
Use this class when the text input inside is expected to be disabled.
.invalid
Use this class if the input has failed a validation check.
.valid
Use this class if the input has passed a validation check (intended for live validation in particular).
<div class="mod-input text ">
<label>Text Label</label>
<input type="text" class="" value="Text input"/></div>