Using CSS to over ride a placeholder value set in HTML

Is that even possible??

Doing this pseudo zen garden exercise and i’m not touching the mark up. But I’m looking to see if I can :

a) set the value of the placeholder in CSS3 only and
b) override what’s currently set, which is ‘Search…’

I was looking @ the ::after/::before pseudo-elements. But my 1st few attempts were null and void. Will keep at it. But this is a curious one. Anyone w/ wisdom on this one?


I don’t think you will have much luck with this. It’s really a job for JS—but of course, the practical thing here is to change the HTML, of course. :slight_smile:

Ahh. Thanks Ralph. I guess a pure CSS solution exists not. Too bad - esp in light of CSS’s strength and features these days. Thanks.

I guess the point here is that this is something that should be done via the HTML, so there’s not a lot of reason to enable it via CSS.

It really depends on your mark up.

For example, if the text was contained in it’s own element, you could hide it in a myriad of ways and then generate the replacement text using a pseudo element. OR you could use text-indent to hide the text like this:

p {text-indent:-999999em;}
p:after{ content:'replacement string'; display:  block; text-indent:0 ;  }

or if it was a word in a block of text ( lest say one wrapped in a B tag)

b {text-indent:-999999em; display:inline-block;}
b:after{ content:‘replacement string’; display: block; text-indent:0 ; }

Kinda clumsy but will do in a pinch. Still, as Ralph said… it’s NOT good practice to do this.

In this case, though, we’re talking about the placeholder attribute on form elements—or that’s my assumption—which can’t be negative indexed, as far as I know.

Though I may be misunderstanding the question entirely, so an example would help to clarify.

I believe the OP was talking about hiding the placeholder text using :before or :after tocover it up but as replaced elements do not have (or are not supposed to have) a :before or :after then it is not possible unless you used the :before or :after of the label element and positioned some content on top of the input which would be quite awkward unless the mark up was exactly right to start with :slight_smile: