Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Use placeholder Attributes as Label.
<!doctype html>
<meta charset="utf-8">
[placeholder] { position: relative; }
/* not functional - attr(...) is not part of the shadow-dom parent element :-/;
[placeholder]::-webkit-input-placeholder::before { position: absolute; display: block; content: attr(placeholder); bottom: -1.5em; left: 0; color: #000; }
/* but this is functional - in webkit Browsers */
[placeholder]::-webkit-input-placeholder::before { position: absolute; display: block; content: "Hi there"; bottom: -1.5em; left: 0; color: #000; }
<form><input placeholder="fancy label" type="text"></form>
Copy link

arnehormann commented Feb 5, 2013

I created this as an experiment after reading - but this webkit only and leading nowhere, I can't access the placeholder attribute value from my custom label.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment