<div class="radikalwp-mail-field"><input type="email" placeholder="name@mail.com" required><span class="radikalwp-mail-field-hint">با تایپ ایمیل معتبر، حاشیه فیلد سبز می‌شود<//span><//div>

.radikalwp-mail-field { width: 300px; }
.radikalwp-mail-field input {
  width: 100%;
  direction: ltr;
  text-align: left;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 13.5px;
  color: #0f172a;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  outline: none;
  box-sizing: border-box;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.radikalwp-mail-field input:not(:placeholder-shown):invalid {
  border-color: #f43f5e;
  box-shadow: 0 0 0 3px rgba(244, 63, 94, .12);
}
.radikalwp-mail-field input:not(:placeholder-shown):valid {
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .12);
}
.radikalwp-mail-field-hint {
  display: block;
  margin-top: 7px;
  font-size: 11px;
  color: #94a3b8;
}