2 #forms Forms

Covers styles used for forms, such as the <input> and <select> elements.

Example

Link Button

<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>