Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Use placeholder Attributes as Label.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
[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; }
</style>
</head>
<body>
<form><input placeholder="fancy label" type="text"></form>
</body>
</html>
@arnehormann
Copy link
Author

arnehormann commented Feb 5, 2013

I created this as an experiment after reading http://laurakalbag.com/labels-in-input-fields-arent-such-a-good-idea/ - 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