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 中元素的順序，並使用 flexbox 的order屬性通過 css 將其反轉回來。

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