Change text that is place holder in html via CSS

Question

I have the following info on a web site that I can not edit the html, but I can edit the CSS.

<textarea id="gui-form-comment" name="comment" placeholder="Comment" style="width:100%;" data-validate-before-update="false"></textarea>

I want to change the placeholder to something else.

Does this answer your question? [How to set placeholder value using CSS?](https://stackoverflow.com/questions/8075986/how-to-set-placeholder-value-using-css) — disinfor, Apr 22 '21 at 15:47

Bence Szalai · Answer 1 · 2021-04-22T16:15:46.373

Technically it is not possible, but you can mimick the behaviour in modern browsers. But you need a selector for the parent element of the textarea and you may need to tweak the font, size and position of the #container::before pseudo-placeholder to match the formatting of your textarea.

/* Hide real placeholder */
#container textarea::placeholder {
    color: transparent;
}

/* Add pseudo-placeholder */
#container::before {
    content: 'New placeholder';
    position: absolute;
    font-family: monospace;
    padding: 4px;
    pointer-events: none;
}

/* Show and hide the pseudo-placeholder */
#container textarea {
    position: relative;
}
#container textarea:placeholder-shown {
    position: static;
}

<div id="container">
  <textarea id="gui-form-comment" name="comment" placeholder="Comment" style="width:100%;" data-validate-before-update="false"></textarea>
</div>

score -1 · Answer 2 · answered Apr 22 '21 at 15:52

So if you can specify the height to the textarea then it'd be easy to make it happened:

<textarea
  id="gui-form-comment"
  name="comment"
  placeholder="Comment"
  style="width: 100%; height: 100px;"
  data-validate-before-update="false"
></textarea>
<style>
  #gui-form-comment::placeholder {
    line-height: 100px;
  }
</style>

The ::placeholder is actually safe to use (https://caniuse.com/?search=%3A%3Aplaceholder)

Change text that is place holder in html via CSS

2 Answers2