如何更改css中输入的占位符？

Question

我的输入格式如下所示： <input type="text" placeholder="My placeholder" class="form-control DataTable--global-filter" value="">我希望能够更改css 中的占位符内容，从"My placeholder"到其他内容。 我设法使用以下 css 片段更改了颜色和背景以及其他属性，但占位符的内容我无法更改。 我应该放什么属性而不​​是content ？

::placeholder {
  font-style: italic;
  font-size: 1em;
  color: mintcream;
  background: thistle;
  padding: 5px;
  content : "some other placeholder" !important;
}

Answer 1

您无法更改CSS中属性的值，但如果您的输入位于form内并且您可以包装input ，则可以使用一个棘手的解决方法。

---

简而言之：

• 用<span>元素包装输入
• 在输入上重叠span::before伪元素并应用您为:placeholder伪类选择的样式
• 更改:placeholder的颜色和背景，使其不再可见
• 将span::before的pointer-events设置为none ，这样每次点击该元素都会被忽略并从底层input元素中截取。
• 对input使用必需的属性
• 当form为:valid时隐藏伪元素

 span::before, ::placeholder { font-family: arial; font-style: italic; font-size: .75rem; padding: 5px; line-height: 1; box-sizing: border-box; } ::placeholder { color: transparent; background: transparent; } span { position: relative; } span::before { content : "some other placeholder very long" ; position: absolute; inset: 0 5px; z-index: 1; color: mintcream; background: thistle; width: calc(100% - 10px); white-space: nowrap; overflow: hidden; pointer-events: none; } form:valid span::before { display: none; }

 <form> <span><input type="text" placeholder="my placeholder" required /></span> </form>