Is it possible to set the placeholder pseudoelement text with CSS?

Question

I know it's possible to style the placeholder of an HTML element using the ::placeholder CSS pseudo-element.

E.g.

input[type="text"]::placeholder {
 ... /* style rules */
}

But is it possible to set the text of the placeholder in CSS?

input[type="text"]::placeholder {
 content: "Common placeholder for all inputs" /* content rules */
}

If you can script CSS on your page, then why don't you do it with Javascript? — Rumplin, Jul 08 '19 at 06:51
`content` mostly works for `:before` and `:after`, so I think `:placeholder` may not have `content` support — Justinas, Jul 08 '19 at 06:53

score 1 · Accepted Answer · answered Jul 08 '19 at 06:53

1

No.

content is intended to be used with pseudo-elements before & after.

is there some particular reason why you'd want to have it set through css and not through html/javascript?

answered Jul 08 '19 at 06:53

dee zg

1

Just asking out of curiosity. I can do it with JavaScript. Just asking. – Water Cooler v2 Jul 08 '19 at 07:00

score -2 · Answer 2 · answered Jul 08 '19 at 06:53

-2

I would suggest you use Javascript for this with jQuery:

$('#search-input').attr('placeholder', 'Search for Stuff');

or pure javascript:

document.getElementById('search-input').setAttribute('placeholder', 'Search for Stuff');

answered Jul 08 '19 at 06:53

Rumplin

I wonder what is the reason for someone to give a negative vote on this anwser? Please elaborate. – Rumplin Jul 08 '19 at 07:05
you probably missed the *with CSS* – Temani Afif Jul 08 '19 at 09:05
I didn't miss that part, I just suggested to use javascript, because it's most probabl not doable with CSS and I don't think it's recommended to use CSS for content manipulation. – Rumplin Jul 09 '19 at 12:19

2 Answers2