Reqiured / Valid / Invalid fields CSS styling

reqiured-valid-invalid.css

/* CSS */

.msg-validation { display: block; }

.input-field:required ~ .msg-validation::before {
  content: '*Обязательное';
}

.input-field:invalid:not(:placeholder-shown) {
  border-color: red;
  background-color: rgba(red, 0.1);
}
.input-field:invalid:not(:placeholder-shown) ~ .msg-validation::before {
  content: 'Заполните это поле';
  color: red;
}

.input-field:valid {
  border-color: lightgreen;
  background-color: rgba(lightgreen, 0.1);
}
.input-field:valid ~ .msg-validation::before {
  display: none;
}

reqiured-valid-invalid.html

<!-- HTML -->

<div class="form-group">
  <label for="required" class="input-label">Обязательное поле</label>
  <input class="input-field" type="email" id="required"
         placeholder="E-mail" required>
  <span class="msg-validation"></span>
</div>