我有以下代码：
<input id="firstName" name="fname" type="text" maxlength="50" placeholder="First Name *" required>
如何将占位符值中的 (*) 符号着色为红色，而不用它来着色其他文本（即名字文本）？
任何帮助深表感谢！
谢谢你！
铝
一种可能的选择是使用:valid伪类为required <input>使绝对定位的同级元素消失——用作输入下的占位符。
所以，我们可以使用::before/::after绝对定位元素上的伪元素来更改伪占位符的颜色。
.input-wrapper {
display: inline-block;
position: relative;
}
.input-wrapper input {
background: transparent;
border: 1px solid #999;
}
.input-wrapper input:valid + .placeholder {
display: none;
}
.input-wrapper .placeholder {
position: absolute;
top: 1px;
left: 2px;
z-index: -1;
}
.input-wrapper .placeholder::before {
content: attr(data-placeholder);
color: #999;
}
.input-wrapper .placeholder::after {
content: " *";
color: tomato;
}
<div class="input-wrapper">
<input id="firstName" name="fname" type="text" maxlength="50" required>
<span class="placeholder" data-placeholder="First Name"></span>
</div>
值得注意的是:validIE10+ 支持伪类。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
