Question

我需要在输入填充一些信息后更改输入的底线颜色。一个重要条件-如果填充后的输入仍然为空（例如，用户轻按输入，然后决定不填充并从输入中抽出），则无需更改颜色。

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>

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

填充后更改输入边框

1 个答案: