在css中添加佔位符內容無法在輸入字段中輸入數據時清除文本

Question

使用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>

Answer 1

這裏有一個CSS唯一的解決辦法：

1. 它需要.emails:valid + .required { display:none; }
2. 的星號是在一個<span>元素

.required { 
 
    color: #f00; 
 
    position:absolute; 
 
    left:2px; 
 
} 
 
.applynowemail{ 
 
    position:relative; 
 
} 
 

 
.emails:valid + .required { display:none; }

<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>

Answer 2

我看到你所標記jquery你的問題。

首先，你不能只用CSS來達到你想要的。

其次，jQuery不能更改/樣式pseudo-elements像:after因爲它們不是DOM樹的一部分。

所以，你需要使用同樣的jQuery那麼當用戶時，你有絕對位置的元素，不使用的利潤率進入裏面的input

而且文字使用hide()方法隱藏它添加自定義*，但使用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() { 
 

 
})

p { 
 
    position: absolute; 
 
    color: #f00; 
 
    left: 0; 
 
    top: 0; 
 
    margin: 0; 
 
} 
 

 
.applynowemail.contactemail { 
 
    position: relative 
 
}

<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>