在輸入中聚焦時更改標簽顏色

Question

 input { background: transparent; position: relative; } label { color: black; } input:focus + label { color: red !important; border: 1px solid white; }

 <div class="input-box d-flex flex-column"> <label for="name" class="py-2">Your Name</label> <input class="py-2 border-0 text-white" id="name" type="text" /> </div>

當我關注表單的輸入時，我想更改標簽文本顏色。

Answer 1

你不能選擇 UP DOM。

您可以使用的是:focus-within在包裝 div 上，然后向下選擇標簽。

 input { background: transparent; } label { color: black; } .input-box:focus-within label { color: red !important; border: 1px solid white; }

 <div class="input-box d-flex flex-column"> <label for="name" class="py-2">Your Name</label> <input class="py-2 border-0 text-white" id="name" type="text" /> </div>