0
<input id="email" name="email" type="text" value="" placeholder="Email*" size="30">

I'm trying to use CSS to change the placeholder of the above input using only CSS w/o success.

Neither of these work:

input#email::-webkit-input-placeholder::before {
  content:'(Optional) ' !important;
}

input#email::placeholder:before {
  content:'(Optional) ' !important;
}
Gary
  • 909
  • 9
  • 26
  • 3
    Does this answer your question? [How to set placeholder value using CSS?](https://stackoverflow.com/questions/8075986/how-to-set-placeholder-value-using-css) Or https://stackoverflow.com/questions/14671707/add-text-to-placeholder-in-css or https://stackoverflow.com/questions/18329425/input-placeholder-using-css-only or https://stackoverflow.com/questions/15314090/placeholder-text – WOUNDEDStevenJones Nov 08 '21 at 21:39
  • Sorry Steve, I saw those and they didn't work. I should have included them in my description. – Gary Nov 08 '21 at 22:04
  • Also, I was referencing modern browsers -- I knew you could do it in the past, but it stopped working. I tried to include this in the question for this reason. – Gary Nov 08 '21 at 22:06
  • 1
    Yes but those linked duplciates also have references and comments that it no longer works. Support from the few working browsers where dropped. – tacoshy Nov 08 '21 at 22:07

2 Answers2

1

It was possible with old versions of Chrome that supported webkit but nowadays in 2021 it's no longer possible.

On a side node, CSS is meant for taking care of the style of your page, it shouldn't be used to change that placeholder anyway.

You should consider using other solutions for example with javascript, as that's exactly what javascript is there for.

Balastrong
  • 4,336
  • 2
  • 12
  • 31
  • This is for a CMS and updates to the code will unfortunately get overwritten on subsequent updates. My only choice is CSS or JS and I was trying to avoid JS. – Gary Nov 08 '21 at 22:05
-1

If you can't change the HTML and you can only use CSS... you can't (as far as I'm aware, that is.) As ::before and ::after pseudo elements only render on containers, and input is a void element (can have no content), you can't have a pseudo-element on an input.

/* doesn't work! */
input::after { 
  content: "TEST 123";
}
<input type="text" placeholder="No pseudo-elements here." />

If you can edit the HTML, you could simply change the placeholder attribute.
If you can edit the JavaScript, you could do the same (input.placeholder = "ooh la la").

Jacob
  • 1,577
  • 8
  • 24
  • you don't use the pseudo-elements on the `input` but on the `placeholder`. but it is only supported by webkit browsers with exception of chrome. So overall support for this is low. PS: `input` is not a void element. It is a replaced element (empty tag / elemnt without content). – tacoshy Nov 08 '21 at 22:02