Bulletproof classless CSS-only implementation of Float Label pattern with automatic fallback for ANY non-supporting browser.
Now part of Blades CSS
Live demos:
- No JS — pure CSS
- No hacks with
requiredand:valid
↳ HTML5 validation support - Compatible with
<select>and<textarea>fields - No need to define
for="..."attribute on<label> - NEW in v2: Finally, the text label can be placed BEFORE the input field!
- NEW in v2: Class-less!
https://blades.ninja/css/standalone/
npm install @anyblades/bladesThen:
@import"@anyblades/blades/float-label";Simply place <input> inside <label> to enable float label:
<label><span>Email</span><inputtype="email" placeholder="email@example.com" /></label>NOTE: W3C allows this!
Alternatively wrap <label> and <input> inside .has-float-label:
<divclass="has-float-label"><labelfor="email">Email</label><inputid="email" type="email" placeholder="email@example.com" /></div>NOTE: for="..." attribute is required on <label> in this case
- Matt D. Smith for original pattern
- Emil Björklund for
:placeholder-shown - Anton Staroverov for
:has(*:placeholder-shown:not(:focus)) label- to finally support labels before input fields
- instead of
input:focus + labelused previously
Any browser with https://caniuse.com/css-placeholder-shown, https://caniuse.com/css-has and https://caniuse.com/css-nesting.
All non-supporting browsers should gracefully fall-back to the default layout.
=> Can be used in ANY browser as is!
Featured by:
- https://github.com/dbohdan/classless-css
- https://github.com/pryley/float-labels.js
- https://github.com/uptonking/note4yaoo/blob/main/toc/toc-lib-css-only.md#css-tools
- https://github.com/bcgov/moh-fpcare
package.json