CSS相邻兄弟选择器与DOM顺序：实现输入框标签动态变换教程

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

.user-input:focus + .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>

.input-group {
  display: flex; /* 启用Flexbox布局 */
  flex-direction: row-reverse; /* 反转子元素（input和label）的显示顺序 */
  justify-content: flex-end; /* 将内容推向右侧，可选，取决于具体布局需求 */
  /* 或者 justify-content: start; 如果希望左对齐 */
  position: relative; /* 如果需要绝对定位子元素，父元素应有定位 */
  overflow: hidden; /* 确保变换不会溢出容器 */
}

.user-label {
  transition: 0.5s; /* 为标签的变换添加平滑过渡效果 */
  /* 初始样式，例如定位 */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* 确保点击标签时焦点能落到input上 */
  color: #888;
}

.user-input {
  /* 输入框基础样式 */
  padding: 10px;
  border: 1px solid #ccc;
  width: 100%; /* 填充父容器宽度 */
  box-sizing: border-box; /* 边框和内边距包含在宽度内 */
  background: transparent; /* 背景透明，以便看到标签 */
  z-index: 1; /* 确保input在label之上，便于交互 */
}

/* 当输入框聚焦、内容有效或被激活时，变换标签 */
.user-input:focus + .user-label,
.user-input:valid + .user-label,
.user-input:active + .user-label {
  color: yellow; /* 改变颜色 */
  transform: translate(10px, -14px) scale(.8); /* 向上移动并缩小 */
  /* 确保z-index在input之下或根据需要调整 */
  z-index: 0;
}

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

  <div class="input-group" style="margin-top: 20px;">
    <input type="email" id="email" name="email" class="user-input" required>
    <label for="email" class="user-label">Email Address</label>
  </div>
</div>

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #282c34;
  color: #fff;
  margin: 0;
}

.container {
  background-color: #3a404a;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 300px;
}

.input-group {
  display: flex;
  flex-direction: row-reverse; /* 关键：反转DOM顺序的视觉呈现 */
  justify-content: flex-end; /* 确保内容靠右对齐，与label的position:absolute配合 */
  position: relative; /* 为内部的绝对定位元素提供参考 */
  height: 40px; /* 设定一个固定高度，防止布局抖动 */
  margin-bottom: 20px;
  border: 1px solid #555;
  border-radius: 4px;
}

.user-label {
  position: absolute;
  left: 10px; /* 初始位置 */
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
  color: #bbb;
  transition: 0.3s ease-out; /* 平滑过渡 */
  pointer-events: none; /* 确保点击穿透到input */
  font-size: 1em;
  padding: 0 5px; /* 稍微增加内边距，模拟浮动标签效果 */
  background-color: transparent; /* 初始背景透明 */
  z-index: 1; /* 确保label在input之上，但会被input背景覆盖 */
}

.user-input {
  width: 100%;
  padding: 10px 10px;
  border: none;
  outline: none;
  background-color: transparent; /* 背景透明，让label可见 */
  color: #fff;
  font-size: 1em;
  z-index: 2; /* 确保input可交互 */
}

/* 当输入框聚焦、内容有效或被激活时，变换标签 */
.user-input:focus + .user-label,
.user-input:valid + .user-label,
.user-input:active + .user-label {
  color: yellow;
  transform: translate(0px, -20px) scale(.8); /* 向上移动并缩小 */
  background-color: #3a404a; /* 变换后背景色与父容器一致，形成“浮动”效果 */
  padding: 0 5px; /* 保持内边距 */
  left: 5px; /* 微调位置 */
}

/* 当input有内容但未聚焦时，label也应保持变换状态 */
.user-input:not(:placeholder-shown):not(:focus) + .user-label {
    transform: translate(0px, -20px) scale(.8);
    color: #bbb; /* 保持颜色 */
    background-color: #3a404a;
    padding: 0 5px;
    left: 5px;
}