Forms
The general structure of a FORM is shown below. With the MAIN element is a HEADER (containing a SPAN that contains the form title), and a FOOTER element that contains the FORM. Each FORM contains one or more FIELDSETS.
Note, that a DIV.fieldset is used instead of an actual 'FIELDSET' tag because currently some browsers do not support 'display:flex' on actual FIELDSET elements. In the future, if a cross-browser method is achieved for enabling flex on FIELDSET elements, these DIV elements will be changed to FIELDSET elements.
The P element in the LABEL is optional; and may be used with either an INPUT, TEXTAREA, or SELECT element.
<main>
<header />
<footer>
<form>
<div class='fieldset'>
<label>
<p />
<input /> | <textarea /> | <select />
</label>
</div>
<div class='fieldset'>
<button />
</div>
</form>
</footer>
</main>
Form CSS
By default, forms stretch to 100% of their parent container's width. Font size is set to 14px, and line-height is set to 40px so that label text matches text in inputs.
FORM
{
width:100%;
font-size:14px;
line-height:40px;
}
FIELDSETs
Fieldsets are used to group similar fields. The styling below removes margin and borders, then adds contrasting borders to the top and bottom of the fieldset with some padding. The effect is that adjacent fieldsets will have a divoted line between them, while the first and last fieldsets have to padding to other adjacent elements.
The flex 'justify-content' attribute is set to 'space-between' as, in the case of labels, there will be no space between any labels anyway; and in the case of buttons, it will cause buttons to be separated within the fieldset (one on each side of the screen). If other arrangement is desired, a DIV can be used to group such buttons (see example below).
FORM > FIELDSET,
FORM > .fieldset
{
margin:0;
border:none;
border-top: solid 1px #FFFFFF;
border-bottom:solid 1px #E5E5E5;
padding:15px 0;
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:space-between;
}
FORM > FIELDSET:first-child { border-top: none; padding-top:0; }
FORM > FIELDSET:last-child { border-bottom: none; padding-bottom:0; }
FORM > .fieldset:first-child { border-top: none; padding-top:0; }
FORM > .fieldset:last-child { border-bottom: none; padding-bottom:0; }
FORM > FIELDSET { justify-content:space-between; }
FORM > .fieldset { justify-content:space-between; }
HEADER > FORM > FIELDSET { justify-content:center; }
HEADER > FORM > .fieldset { justify-content:center; }
Form LABEL elements
The styling below ensures that by default labels take 100% of the width of a fieldset. Later styling will add classes such as 'half_width', 'third_width', etc, that allow multiple LABELs and their contained INPUTs on a line.
Label text can use either SPAN (legacy) or P (preferred). However, in this context, P elements have their top margin removed.
FORM > FIELDSET LABEL,
FORM > .fieldset LABEL
{
display:block;
box-sizing:border-box;
position:relative;
padding:0 15px;
flex-basis:100%;
}
FORM > FIELDSET > LABEL > SPAN,
FORM > FIELDSET > LABEL > P,
FORM > .fieldset > LABEL > SPAN,
FORM > .fieldset > LABEL > P
{
display:block;
margin-top:0;
}
FORM INPUT
{
margin:0;
box-sizing:border-box;
height:40px;
padding:10px 20px;
font-size:inherit;
line-height:20px;
width:100%;
outline:none;
border:solid 1px #ddd;
}
FORM INPUT[type='checkbox'],
FORM INPUT[type='radio']
{
width:auto;
vertical-align:middle;
padding-left:50px;
line-height:auto;
height:auto;
margin-right:20px;
}
FORM TEXTAREA
{
margin:0;
box-sizing:border-box;
padding:10px 20px;
font-size:inherit;
line-height:20px;
width:100%;
outline:none;
border:solid 1px #ddd;
}
Resizable labels
The size of inputs is controlled by the size of the label that contains it. Generally, if an input should share a row with another the LABEL will be given the 'half_width', 'third_class', or 'quarter_class' class.
FORM > FIELDSET > LABEL.half_width,
FORM > .fieldset > LABEL.half_width
{
flex-basis:50%;
}
FORM > FIELDSET > LABEL.third_width,
FORM > .fieldset > LABEL.third_width
{
flex-basis:33.3333%;
}
FORM > FIELDSET > LABEL.quarter_width,
FORM > .fieldset > LABEL.quarter_width
{
flex-basis:25%;
}
FORM > FIELDSET > LABEL.fourth_width,
FORM > .fieldset > LABEL.fourth_width
{
flex-basis:25%;
}
FORM > FIELDSET > LABEL.fifth_width,
FORM > .fieldset > LABEL.fifth_width
{
flex-basis:20%;
}
FORM > FIELDSET > LABEL.sixth_width,
FORM > .fieldset > LABEL.sixth_width
{
flex-basis:16.6666666%;
}
If the width of the window is reduce below 740 pixels, the definitions for these widths is changed to 100%, ensuring that forms are not crowded.
@media only screen and (max-width:740px) and (min-device-width:1025px) {
@media only screen and (max-width:740px) {
FORM > FIELDSET > LABEL.half_width,
FORM > .fieldset > LABEL.half_width,
FORM > FIELDSET > LABEL.third_width,
FORM > .fieldset > LABEL.third_width,
FORM > FIELDSET > LABEL.quarter_width,
FORM > .fieldset > LABEL.quarter_width,
FORM > FIELDSET > LABEL.fourth_width,
FORM > .fieldset > LABEL.fourth_width,
FORM > FIELDSET > LABEL.fifth_width,
FORM > .fieldset > LABEL.fifth_width
{
flex-basis:100%;
}
FORM > FIELDSET > LABEL.sixth_width,
FORM > .fieldset > LABEL.sixth_width
{
flex-basis:33.3333333%;
}
}
Stying BUTTON elements
.button
{
display:inline-block;
box-sizing:border-box;
text-align:center;
font-size:inherit;
margin:0 15px;
padding:0 50px;
height:50px;
line-height:50px;
background:white;
color:#333;
border:solid 1px #333;
text-decoration:none;
cursor:pointer;
}
.button.big
{
font-size:40px;
line-height:80px;
height:80px;
font-weight:300;
}
A.button
{
padding:0;
}
.button.rounded
{
border-radius:6px;
}
.button.filled
{
background:black;
border:none;
color:white;
}
.button.filled:disabled
{
background:black;
border:none;
color:#ddd;
opacity:0.3;
}
.button.filled.primary,
.button.filled.blue
{
background:#337AB7;
}
.button.filled.success,
.button.filled.green
{
background:#5CB85C;
}
.button.filled.info,
.button.filled.turquoise
{
background:#5BC0DE;
}
.button.filled.warning,
.button.filled.orange
{
background:#F1AD4E;
}
.button.filled.danger,
.button.filled.red
{
background:#D9534F;
}
Styling SELECT elements
SELECT
{
width:100%;
}
SELECT
{
/* -webkit-appearance:none; */
/* -moz-appearance:none; */
position:relative;
display:block;
margin:0;
height:40px;
padding:0 0 0 20px;
background:#f0f0f0;
color:#555;
width:100%;
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
border-top:solid 1px #cccccc;
border-left:solid 1px #cccccc;
border-bottom:solid 1px #a6a6a6;
border-right:solid 1px #a6a6a6;
outline:none;
text-indent:0.01px;
text-overflow:' ';
font-size:inherit;
line-height:40px;
}
SELECT:after
{
content:"X";
position:absolute;
right:0;
top:0;
bottom:0;
link-height:40px;
}
@-moz-document url-prefix()
{
SELECT
{
vertical-align:baseline;
}
}