Как изменить цвет текста в метке, когда ввод рядом с ним сфокусирован на форме с несколькими надписями и вводится в css

Question

В моей форме у меня есть несколько меток и входов. Я хочу изменить цвет текста конкретной метки на входе, рядом с которым находится фокус.

Моя форма html код ниже:

<div class="form">
                    <label class="label">Basic Details<br>
                        <table class="form-table">
                            <tr>
                                <td><label class="form-label">Name:</label></td>
                                <td><input type="text" name="name" placeholder="Name" required></td>
                            </tr>
                            <tr>
                                <td><label>Email:</label></td>
                                <td><input type="email" name="email" placeholder="Email" required></td>
                            </tr>
                            <tr>
                                <td><label>Phone number:</label></td>
                                <td><input type="phone" name="phone" placeholder="Phone number"required></td>
                            </tr>
                        </table>
                        
                </div>

Я хочу изменить цвет метки имени, когда фокусируюсь на вводе имени рядом с ним.

Answer 1

Мы можем использовать селектор + и изменять порядок элементов в html и возвращать его обратно через css, используя свойство order, являющееся частью flexbox.

[table] {
  display: table;
}

[row] {
  display: flex;
}

input {
  margin-left: auto;
  order: 2;
}

[row]>input:focus+label {
  color: red;
}

<div class="form">
  <div table>
    <div row>
      <input type="text" name="name" placeholder="Name" required>
      <label class="form-label">Name:</label>
    </div>
    <div row>
      <input type="email" name="email" placeholder="Email" required>
      <label>Email:</label>
    </div>
    <div row>
      <input type="phone" name="phone" placeholder="Phone number" required>
      <label>Phone number:</label>
    </div>
  </div>
</div>