Take the 2-minute tour ×

I would like the use the placeholder attribute instead of labels in my webpages, but I need to hide the labels when placeholders are supported. Is this possible with only CSS?

Ideally, I like the equivalent of

label + input { display: none; } -->
share|improve this question
add comment

2 Answers

You'd probably need to use Modernizr to detect placeholder support and then hide the labels. You'd need JavaScript though.

I'm not aware of another way, but others might be.

share|improve this answer
add comment

This is not possible with CSS. There is no support for "parent selectors" and there most likely never will be.

If you don't want to use Modernizer, here's a simple test to run with JS:

if (("placeholder" in document.createElement("input"))) {
//placeholder is supported, so hide your label elements or whatever
share|improve this answer
I didn't see anyway without JavaScript, but I want support phones that don't have JavaScript. –  BeWarned Mar 3 '11 at 23:16
I would have thought that if the phone doesn't support JavaScript, it's unlikely to support CSS! –  Ian Devlin Mar 4 '11 at 11:28
add comment

Your Answer


