如何让我的输入字段标签像 Gmail 一样验证？在 CSS 的帮助下答案

【问题标题】：How can I make my input field tags validate like Gmail ? With the help of CSS如何让我的输入字段标签像 Gmail 一样验证？在 CSS 的帮助下
【发布时间】：2020-02-16 04:36:08
【问题描述】：

我想使用 CSS 对电子邮件地址输入验证进行 Gmail 样式输入标签背景更改，因为标签的背景颜色变为红色表示无效输入，而变为绿色表示有效输入（如 example@gmail.com em>)。

我试过了

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

【问题讨论】：

请添加一些代码示例向人们展示您尝试过的操作。
.bootstrap-tagsinput .tag input:valid { background-color:green } .bootstrap-tagsinput .tag input:invalid{ background-color:red }
这就是你的全部代码吗？您正在谈论您的问题中的表单和某种验证
@giuseppedeponte 不，它只是 CSS。
你应该edit你的问题

标签： css validation input

【解决方案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>

【讨论】：

这是 sn-p 尝试一下，请帮助我验证它的标签。 tags.bss.design
您的 CSS 样式正在您的页面上工作，只有 type="email" 字段被 display: none 属性隐藏。由于 bootstrap 插件用它的自定义元素替换了真实的输入，你可以不再依赖浏览器验证，而是自己实现一些 JS 验证逻辑。