如何更改CSS输入的占位符？

Question

我有一个看起来像这样的形式的输入：＆lt; input type =“ text”占位符=“我的占位符” class =“ form-control datatable-global-filter” value =“＆gt; 我希望能够更改CSS中的占位符内容，从“我的占位符”到其他东西。我设法通过以下CSS代码来更改颜色和背景以及其他属性，但是我无法更改占位符的内容。我应该放置什么属性，而不是content？

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

Answer 1

您不能更改css中属性的值，但是如果您的输入位于表单中，则可以使用棘手的解决方法，您可以使用包装输入。

---

简而言之：

• 将输入用＆lt; span＆gt;元素
• 重叠span :: pseudoelement 越过输入，并应用您选择的样式：Alterholder伪class
• 更改的颜色和背景：占位符，因此不再可见
• pointer-events none span span ::之前，因此每次点击此元素都将被忽略并从基础INPUT元素中截获。
• 请使用所需的属性
• 在输入 表单 is is ：有效时，

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>