Using CSS to over ride a placeholder value set in HTML

HTML & CSS
1

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?

Thanks.

2

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:

3

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.

4

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.

5

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.

6

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.

7

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: