当输入填充必需属性 javascript/html/css 时如何更改焦点颜色

Question

我正在处理 HTML 表单。我已将必需的元素添加到一些输入字段中。因为我使用的是 Bootstrap，所以输入字段在聚焦时默认为蓝色。我已将所需的输入字段设置为红色，并带有input:required:focus {border: 1px solid red;}. 现在，当填写所需的输入字段时，我想将输入字段边框更改为绿色。我的问题是，这可以用 CSS 实现吗？如何实现？如果没有，我如何用 Javascript 或其他东西来实现这一点？

input:required:focus {
  border: 1px solid red;
  outline: none;
}
textarea:required:focus {
  border: 1px solid red;
  outline: none;
}
.form-horizontal {
  padding-left: 15px;
  padding-right: 15px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-horizontal">

  <div class="form-group">
    <label class="col-md-2 control-label" for="Name">
      Full name <span class="required">*</span>
    </label>
    <div class="col-md-10">
      <input id="Name" name="Name" placeholder="Full name" class="form-control input-md" required="" type="text">
      <span class="format-block"><a data-toggle="tooltip" data-placement="right" title="John Doe">Format</a></span>
    </div>
  </div>

  <div class="form-group">
    <label class="col-md-2 control-label" for="email">
      E-mail <span class="required">*</span>
    </label>
    <div class="col-md-10">
      <input id="email" name="email" placeholder="E-mail" class="form-control input-md" required="" type="email">
      <span class="format-block"><a data-toggle="tooltip" data-placement="right" title="johndoe@gmail.com">Format</a></span>
    </div>
  </div>

  <div class="form-group">
    <label class="col-md-2 control-label" for="phone">
      Phone number
    </label>
    <div class="col-md-10">
      <input id="phone" name="phone" placeholder="Phone number" class="form-control input-md" type="text">
      <span class="format-block"><a data-toggle="tooltip" data-placement="right" title="Only numbers">Format</a></span>
    </div>
  </div>

  <div class="form-group">
    <label class="col-md-2 control-label" for="question">
      Question <span class="required">*</span>
    </label>
    <div class="col-md-10">
      <textarea rows="20" cols="40" class="form-control" id="question" required="" name="question"></textarea>
    </div>
  </div>

  <div class="col-md-10 col-md-offset-2">
    <button type="submit" class="btn btn-default formbuttonalign">Send mail!</button>
  </div>
</form>

Answer 1

所以我发现HTML5包含一个validandinvalid选择器。

  input:required:focus {
  border: 1px solid red;
  outline: none;
  }

 textarea:required:focus {
 border: 1px solid red;
 outline: none;
 }

input:focus:valid {
border: 1px solid green;
outline: none;
}

input:focus:invalid {
border: 1px solid red;
outline: none;
}


input:valid {
border: 1px solid green;
}

您可以将它与选择器结合使用required来检查其是否有效，是否已填写以及是否正确，就像电话号码仅包含数字一样。有趣的是它只有 HTML5 和 CSS3 :)