標簽不會在輸入焦點上轉換

Question

當有人單擊輸入時，我想轉換輸入的標簽。 但它不會變形。

如果我這樣做.user-input:focus, .user-input:valid它會更改輸入，這意味着它應該與標簽一起使用。

 .user-input:focus+.user-label, .user-input:valid+.user-label { color: yellow; transform: translate(10px, -14px) scale(.8); }

 <div class="container"> <div class="input-group"> <label for="user" class="user-label">Username</label> <input type="text" name="user" class="user-input" required> </div> </div>

Answer 1

• 在 css 中我們只能選擇下一個兄弟，我們不能選擇 DOM 中選擇器兄弟之前的兄弟。
• 所以，我剛剛在input之后放置了label 。
• 使用下面的 css 在視圖中輸入之前保留標簽。

.input-group {
  display: flex;
  flex-direction: row-reverse;
  justify-content: start;
}

 .input-group { display: flex; flex-direction: row-reverse; justify-content: start; } .user-label { transition: 0.5s; } .user-input:active+.user-label, .user-input:focus+.user-label, .user-input:valid+.user-label { color: yellow; transform: translate(10px, -14px) scale(.8); }

 <div class="container"> <div class="input-group"> <input type="text" name="user" class="user-input" required> <label for="user" class="user-label">Username</label> </div> </div>

Answer 2

你可以通過改變你的 HTML 結構來實現這一點，用你的標簽標簽切換你的輸入，你不能在同一個 div 中選擇目標元素之前的 css 元素

HTML

 <div class="container">
      <div class="input-group">
        <input type="text" name="user" class="user-input" required>
        <label for="user" class="user-label">Username</label>
      </div>
 </div>

CSS

.user-input:focus + .user-label {
  color: yellow;
  transform: translate(10px, -14px) scale(.8);
}