Checkbox layout and pure CSS validation styles

checkbox-layout.html

<!-- HTML -->

<div class="form-group">
  <label for="dis" class="input-label">Имя</label>
  <input class="input-field" type="email" id="dis"
         value="Veronika" disabled>
</div>
<div class="form-group">
  <label for="read" class="input-label">Ваша почта</label>
  <input class="input-field" type="email" id="read"
         value="email@mail.com" readonly>
</div>
<div class="form-group checkbox-group">
  <input type="checkbox" class="check-field" id="first" value="1">
  <label class="check-label" for="first">Я хочу получать уведомления на почту</label>
</div>

checkbox-validation-styles.css

/* CSS */

.input-field:read-only {
  background-color: #FEFEFE;
  user-select: none;
  pointer-events: none;
  color: #555;
}
.input-field:disabled {
  background-color: #DDD;
  color: #555;
  cursor: not-allowed;
}

.check-field {
  height: 0;
  width: 0;
  visibility: hidden;
}

.check-label {
  margin-left: 32px;
  cursor: pointer;
}
.check-label::before {
  content: '';
  height: 16px;
  width: 16px;
  position: absolute;
  left: 0;
  background-color: #FAFAFA;
  background-repeat: no-repeat;
  background-size: contain;
  transition: all 0.12s ease;
}

.check-field:checked ~ .check-label::before {
  background-color: #D4E7FE;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iNTEycHgiIGlkPSJMYXllcl8xIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjUxMnB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48cGF0aCBkPSJNNDYxLjYsMTA5LjZsLTU0LjktNDMuM2MtMS43LTEuNC0zLjgtMi40LTYuMi0yLjRjLTIuNCwwLTQuNiwxLTYuMywyLjVMMTk0LjUsMzIzYzAsMC03OC41LTc1LjUtODAuNy03Ny43ICBjLTIuMi0yLjItNS4xLTUuOS05LjUtNS45Yy00LjQsMC02LjQsMy4xLTguNyw1LjRjLTEuNywxLjgtMjkuNywzMS4yLTQzLjUsNDUuOGMtMC44LDAuOS0xLjMsMS40LTIsMi4xYy0xLjIsMS43LTIsMy42LTIsNS43ICBjMCwyLjIsMC44LDQsMiw1LjdsMi44LDIuNmMwLDAsMTM5LjMsMTMzLjgsMTQxLjYsMTM2LjFjMi4zLDIuMyw1LjEsNS4yLDkuMiw1LjJjNCwwLDcuMy00LjMsOS4yLTYuMkw0NjIsMTIxLjggIGMxLjItMS43LDItMy42LDItNS44QzQ2NCwxMTMuNSw0NjMsMTExLjQsNDYxLjYsMTA5LjZ6Ii8+PC9zdmc+);
}