我需要在输入填充一些信息后更改输入的底线颜色。一个重要条件-如果填充后的输入仍然为空(例如,用户轻按输入,然后决定不填充并从输入中抽出),则无需更改颜色。
var input = document.getElementById("fname");
input.onchange = function(e) {
if(input.value != '') {
e.target.style.borderBottom = "1px solid #ccffcc";
}
};
<form>
<label for="fname" id="name">NAME</label>
<input type="text" id="fname" name="fname" value="">
<input type="submit" value="send">
</form>
答案 0 :(得分:1)
使用:valid
CSS伪类
.custom-border {
outline: none;
}
.custom-border:valid {
border-bottom: 1px solid #ccffcc;
}
<form>
<label for="fname" id="name">NAME</label>
<input type="text" id="fname" name="fname" value="" class="custom-border" required>
<input type="submit" value="send">
</form>