Изменение цвета метки без js, если проверка ввода не удалась

Question

У меня есть форма с меткой и типом ввода = текст.Я использую шаблон = "" для проверки текста и отображаю сообщение под вводом текста, когда проверка не удалась.Я хочу иметь возможность изменить цвет метки, а также текст внутри ввода текста, но, похоже, не получилось.Это то, что я до сих пор.Я не хочу использовать JS.

               <div class="form-group address">
                <label for="address" class="form-group__names" id="invalid">Address</label>
                <input type="text" name="address" pattern="^\d+\s[A-z]+\s[A-z]+,\s+[A-z]+,\s+[A-z] 
                {2}\s+\d{5}" />
                <b></b>
              </div>

            .form-group input:invalid + b:before {
             content: "Form is invalid";
             color: red;
            }

             input[type="text"]:invalid + label#invalid {
             color: red;
            }

Answer 1

У CSS есть общий комбинатор и сестра ~ и смежный комбинатор и сестра + , и ни один из них не может выбрать предыдущий элемент брата.Для этого вы должны изменить порядок своих элементов, поэтому ввод идет первым.Это один из способов сделать это:

.form-group input:invalid+b:before {
  content: "Form is invalid";
  color: red;
}

input[type="text"]:invalid~label {
  color: red;
}

.address {
  position: relative;
  padding-left: 100px;
}

.address label {
  position: absolute;
  left: 0;
  line-height: 30px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="form-group address">
    <input type="text" id="address" name="address" pattern="^\d+\s[A-z]+\s[A-z]+,\s+[A-z]+,\s+[A-z]{2}\s+\d{5}" />
    <b></b>
    <label for="address" class="form-group__names" id="invalid">Address</label>
  </div>
</div>

Также на JSFiddle