<div class="form-area">
  <label class="form-field">
    <span class="form-field__label">
      名前
    </span>
    <input type="text" class="form-field__input" placeholder="苗字 名前" required>
    <span class="form-field__error">
      名前は必須です
    </span>
  </label>
  <label class="form-field">
    <span class="form-field__label">
      電話番号
    </span>
    <input type="tel" class="form-field__input" pattern="^0\d{9,10}$" placeholder="000011112222" required>
    <span class="form-field__error">
      ハイフンなしの半角数字を入力してください
    </span>
  </label>
</div>
.form-area {
   display: grid;
   gap: 10px;
}

.form-field__error {
  display: none;
  color: red;
}

.form-field:has(.form-field__input:user-invalid) {
  .form-field__label {
    color: red;
  }
  .form-field__error {
    display: block;
  }
}

.form-field__input:user-invalid {
  background-color: red;
  border-color: red;
  color: #FFF;
}

.form-field__input:user-invalid::placeholder {
  color: #FFF;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.