Skip to content

Instantly share code, notes, and snippets.

@arnehormann

arnehormann/placeholder-label.html

Created February 5, 2013 09:15
Show Gist options
  • Save arnehormann/4713244 to your computer and use it in GitHub Desktop.
Save arnehormann/4713244 to your computer and use it in GitHub Desktop.
Download ZIP
Use placeholder Attributes as Label.
Raw
placeholder-label.html
<!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

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