css - 如何使我的输入字段标签像 Gmail 一样有效？在 CSS 的帮助下

Question

我想使用 CSS 更改 Gmail 样式输入标签的背景以验证电子邮件地址输入，因为标签的背景颜色对于无效输入变为红色，对于有效输入变为绿色(例如 example@gmail.com).

我试过了

<input class="form-control form-control-sm mailfield" type="email" data-role="tagsinput" data-class="label-info" placeholder="Sender Mail Id" autocomplete="on" autofocus="" required="">

```css
<style> 
.bootstrap-tagsinput .tag input:valid {
    background-color:green
}

.bootstrap-tagsinput .tag input:invalid{ 
    background-color:red
}
</style> 

Answer 1

您的代码似乎有效，只是您在 CSS 属性声明中缺少尾随分号，例如

    background-color: green;

这是一个工作示例:

.bootstrap-tagsinput .tag input:valid {
  background-color: green;
}

.bootstrap-tagsinput .tag input:invalid {
  background-color: red;
}

<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />

<div class="bootstrap-tagsinput">
  <label class="tag">
    <input class="form-control form-control-sm mailfield" type="email" data-role="tagsinput" data-class="label-info" placeholder="Sender Mail Id" autocomplete="on" autofocus="" required="" value="invalid-email">
  </label>
  <label class="tag">
    <input class="form-control form-control-sm mailfield" type="email" data-role="tagsinput" data-class="label-info" placeholder="Sender Mail Id" autocomplete="on" autofocus="" required="" value="valid@ema.il">
  </label>
</div>