我有以下代码:
<input id="firstName" name="fname" type="text" maxlength="50" placeholder="First Name *" required>
如何将占位符值中的(*)符号着色为红色而不将其他文本着色(作为名字文本)?
非常感谢任何帮助!
谢谢! 人
答案 0 :(得分:5)
一种可能的选择是使用:valid
伪类来表示必需 <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;
}
&#13;
<div class="input-wrapper">
<input id="firstName" name="fname" type="text" maxlength="50" required>
<span class="placeholder" data-placeholder="First Name"></span>
</div>
&#13;
值得注意的是IE10 +中支持:valid
伪类。
答案 1 :(得分:3)
不幸的是,无法更改输入中某些文字的颜色:(您可以尝试使用contenteditable
div:
<div class="input" contenteditable>First Name <span style="color:red;">*</span></div>
然后,您必须使用JS添加和删除占位符:
$(function(){
$('.input').focus(function(){
$(this).html('');
});
$('.input').blur(function(){
if($(this).html()=='') this.innerHTML='First Name <span style="color:red;">*</span>';
});
});
答案 2 :(得分:0)
你可能不会那样。最好的方法就是这样回答:Multiple font colors in an Input tag
本质上,第二个div放在输入字段上,允许改变颜色。