Difference between revisions of "Float label"

From Level Access Web Labs
Jump to navigation Jump to search
(cross-link)
 
Line 87: Line 87:
  
 
<p><a href="https://codepen.io/jamestalmond/pen/PNNYEm" target="_blank"> A Pen By: James Thomas Almond</a></p>
 
<p><a href="https://codepen.io/jamestalmond/pen/PNNYEm" target="_blank"> A Pen By: James Thomas Almond</a></p>
 +
 
<code>
 
<code>
 
.form-textbox:focus ~ .form-label,<br>
 
.form-textbox:focus ~ .form-label,<br>
Line 141: Line 142:
 
</html>
 
</html>
 
-->
 
-->
 +
 +
See also: [[Label Moved On Focus]]
 +
 
[[Category:CSS]]
 
[[Category:CSS]]
 
[[Category:Float Label]]
 
[[Category:Float Label]]

Latest revision as of 21:15, 28 February 2020

example

A Pen By: James Thomas Almond

.form-textbox:focus ~ .form-label,
.form-textbox:valid ~ .form-label {
top: -1.5em;
left: 0;
font-size: .8em;
...}

CSS transitions
Form label placeholders


See also: Label Moved On Focus