更改占位符最后一个字符的颜色答案

【问题标题】：Change color of Place holder last character更改占位符最后一个字符的颜色
【发布时间】：2020-11-17 18:00:47
【问题描述】：

我有一个带有inputs 的表单，除了帮助文本之外，placeholders 还显示* 的必填字段。

我想要改变* 的颜色，即占位符的最后一个字符

<input type="text" placeholder="Name *" />

是否有任何选择器？除了下面的选择器，选择一个placeholder；

input::-webkit-input-placeholder（适用于 webkit 浏览器）

提前致谢！

【问题讨论】：

不，你不能。最好用一些 div 包装输入，给它position: relative 并添加一个带有position: absolute; 的标签，这样你就可以用 span 或其他东西包围*。你必须使用 js 来隐藏焦点上的标签。同样的问题在这里：stackoverflow.com/questions/20964967/…
@drip 看看罗南的回答 :)

标签： html css placeholder

【解决方案1】：

有点棘手，您必须检查自己是否支持不同的浏览器，但这里有一个 Fiddle Demo 供您使用 :-)

html

<input type="text" placeholder="Name" />

css

input::-webkit-input-placeholder:after{color:red;content:" *";}

只是将 * 移动到 :after 元素的一部分，并单独设置样式。

【讨论】：

它不工作。你能再检查一下你的小提琴吗？

【解决方案2】：

顶级解决方案不再有效我从How to set color for last character in placeholder 找到了解决方案这是代码：

input {
  padding: 1em;
}
::-webkit-input-placeholder {
  background: -webkit-linear-gradient(left, #AAA 0%, #AAA 70%,red 70%, red 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

【讨论】：