2.0 - Forms

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

2.1 - Text Input

Below are the text-oriented form elements used on the site.

2.1.1 - Single-Line Text Boxes

Your standard, everyday text boxes.

Default styling

Highlight the text box when hovering

:hover

Similar to :hover, however it should demand more attention than when an input is simply hovered.

:focus

When disabled, the input's appearance should reflect as such.

:disabled

 
 <input type="text" class="{$modifiers}" value="Text"/>

2.1.2 - Label/Textbox Pairs

All labelled textboxes should be included in a wrapper <div> element for both layout convenience and specific styling.

Default styling

To be used when the text input inside is expected to be disabled.

.disabled

To be used if the input has failed a validation check.

.invalid

To be used if the input has passed a validation check (intended for live validation in particular).

.valid

 
<div class="mod-input text {$modifiers}">
    <label>Text Label</label>
    <input type="text" value="Text Input"/>
</div>