VelinStyle Floating Labels
Create beautifully animated form labels that float above the input when focused or filled using
.velin-float-label.
Basic example
Wrap an input and label inside .velin-float-label. The input must come before
the label, and a placeholder attribute is required (it can be a space).
<div class="velin-float-label">
<input type="email" class="velin-input" id="email" placeholder=" ">
<label for="email">Email address</label>
</div>
<div class="velin-float-label">
<input type="password" class="velin-input" id="password" placeholder=" ">
<label for="password">Password</label>
</div>Textarea
Floating labels also work with <textarea> elements.
<div class="velin-float-label">
<textarea class="velin-input" id="msg" placeholder=" " rows="3"></textarea>
<label for="msg">Your message</label>
</div>Select
Use with .velin-select for floating-label selects.
<div class="velin-float-label">
<select class="velin-select" id="category">
<option selected>Choose…</option>
<option value="1">Option 1</option>
</select>
<label for="category">Category</label>
</div>