如何改变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>