Как я могу сделать так, чтобы теги моего поля ввода проверялись как Gmail? С помощью CSS

Question

Я хочу изменить фоновое значение тегов ввода Gmail для проверки правильности ввода адреса электронной почты с помощью CSS, так как цвет фона тега становится красным для недопустимого ввода и зеленым для правильного ввода (например, 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>