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

.form-area {
   display: grid;
   grid-template-columns: max-content 1fr;
   gap: 10px;
}

.form-field {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
}

.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 {
  width: 100%;
  box-sizing: border-box;
}

.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.