使用css在palceholder中添加了内容,但问题是当我在文本框中添加数据时,我使用css添加的占位符内容未被清除。
.applynowemail.contactemail:after {
content: '*';
position: absolute;
color: #f00;
/* margin-top: -36px;
margin-left: 52px; */
}

<div class="applynowemail contactemail">
<input type="email" class="form-control emails" id="email" name="email" value="<?php echo set_value('email');?>" placeholder="Email" required>
</div>
&#13;
答案 0 :(得分:2)
我发现您已将jquery
标记为您的问题。
首先,只有使用CSS才能达到你想要的效果。
其次,jQuery你不能像pseudo-elements
一样改变/样式:after
因为它们不是DOM树的一部分。
因此,您需要使用jQuery添加自定义*
,然后在用户在hide()
input
方法隐藏它
此外,如果您有绝对位置元素,请不要使用边距,而应使用top right bottom left
代替
编辑:使用正在检查输入的val.length
的解决方案进行编辑,以查看输入是否为空。因此,当用户删除他输入的内容时,*
将再次出现
请参阅下面的代码段
我改变了你的html和css但你可以随意修改
var input = $("input")
$(input).before('<p class="star">*</p>')
$(input).on("keyup", function() {
var val = $(input).val().length
if (val > 0) {
$('.star').hide()
} else {
$('.star').show()
}
})
$(input).change(function() {
})
&#13;
p {
position: absolute;
color: #f00;
left: 0;
top: 0;
margin: 0;
}
.applynowemail.contactemail {
position: relative
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="applynowemail contactemail">
<input type="email" class="form-control emails" id="email" name="email" placeholder="Email" required>
</div>
&#13;
答案 1 :(得分:1)
这是一个仅限CSS的解决方案:
.emails:valid + .required { display:none; }
<span>
元素
.required {
color: #f00;
position:absolute;
left:2px;
}
.applynowemail{
position:relative;
}
.emails:valid + .required { display:none; }
&#13;
<div class="applynowemail contactemail">
<input type="text" class="form-control emails" id="email" name="email" value="Some Email" placeholder=" Email" required>
<span class="required">*</span>
</div>
&#13;