通过 CSS 更改 html 中占位符的文本

Question

我在一个网站上有以下信息，我无法编辑 html，但我可以编辑 CSS。

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

我想将占位符更改为其他内容。

Answer 1

从技术上讲这是不可能的，但您可以模仿现代浏览器中的行为。但是您需要一个用于 textarea 父元素的选择器，并且您可能需要调整 #container::before 伪占位符的字体、大小和位置以匹配您的 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>

Answer 2

因此，如果您可以指定 textarea 的高度，那么它会很容易实现：

<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>

::placeholder 实际上可以安全使用 (https://caniuse.com/?search=%3A%3Aplaceholder)