Author: | skielbasa |
---|---|
Views Total: | 24,388 views |
Official Page: | Go to website |
Last Update: | July 7, 2014 |
License: | Unknown |
Preview:

Description:
With pure CSS and CSS3 transitions, we can create animated & floating labels when a text field is populated with text. Inspired by Matt D. Smith’s design and created by skielbasa.
How to use it:
Create text fields (input or textarea) with text labels.
<div class="styled-input"> <input type="text" required /> <label>Name</label> <span></span> </div> <div class="styled-input wide"> <textarea required></textarea> <label>Message</label> <span></span> </div>
The CSS styles to animate the floating labels when your text fields are focused on.
input:focus ~ label, textarea:focus ~ label, input:valid ~ label, textarea:valid ~ label { font-size: 0.75em; color: #8e44ad; top: -2.25rem; -webkit-transition: all 0.125s ease; transition: all 0.125s ease; } .styled-input { float: left; width: 33.3333%; margin: 2rem 0 1rem; position: relative; } .styled-input label { color: #999; padding: 1rem; position: absolute; top: 0; left: 0; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; pointer-events: none; } .styled-input.wide { width: 100%; } input, textarea { padding: 1rem 1rem; border: 0; width: 100%; font-size: 1rem; } input ~ span, textarea ~ span { display: block; width: 0; height: 3px; background: #8e44ad; position: absolute; bottom: 0; left: 0; -webkit-transition: all 0.125s ease; transition: all 0.125s ease; } input:focus, textarea:focus { outline: 0; } input:focus ~ span, textarea:focus ~ span { width: 100%; -webkit-transition: all 0.075s ease; transition: all 0.075s ease; } textarea { width: 100%; min-height: 15em; }
hello, i have to use span tag above is not working ,please check attched image:
b’cus wp contact form 7 add class above span tag.
Thanks,
Chirag