在输入字段中输入数据时,在css中添加占位符内容无法清除文本

时间:2017-07-28 08:55:10

标签: html css

使用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;
&#13;
&#13;

2 个答案:

答案 0 :(得分:2)

我发现您已将jquery标记为您的问题。

首先,只有使用CSS才能达到你想要的效果。

其次,jQuery你不能像pseudo-elements一样改变/样式:after因为它们不是DOM树的一部分。

因此,您需要使用jQuery添加自定义*,然后在用户在hide()

中输入文本时使用input方法隐藏它

此外,如果您有绝对位置元素,请不要使用边距,而应使用top right bottom left代替

编辑:使用正在检查输入的val.length的解决方案进行编辑,以查看输入是否为空。因此,当用户删除他输入的内容时,*将再次出现

请参阅下面的代码段

我改变了你的html和css但你可以随意修改

&#13;
&#13;
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;
&#13;
&#13;

答案 1 :(得分:1)

这是一个仅限CSS的解决方案:

  1. 需要.emails:valid + .required { display:none; }
  2. 星号位于<span>元素
  3. &#13;
    &#13;
    .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;
    &#13;
    &#13;