Evo

Form Label

Experimental floating label interactions.

Label Floating

label-floating experimental

Label Floating
<span class="evo-position">
<input type="text" name="text" class="evo-form evo-form-padding evo-form-box form-hover-color form-focus-danger" required />
<label class="label-floating evo-white-bg padding-left-5 padding-right-5 text-uppercase text-size-3 text-tracking-10">Floating Label</label>
</span>

Create a <input type="text"> tag, and place a <label> tag below it (not above). Apply the label-floating tag to the label, and the evo-position tag to a span that contains the label and the input. For some reason, this requires the required attribute to work. Default form styles are set in _evo_variables.scss.

textarea