CSS相邻兄弟选择器失效？实现焦点输入框标签动态变换的技巧

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

.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" id="user" class="user-input" required>
    <label for="user" class="user-label">Username</label>
  </div>
</div>

.input-group {
  display: flex;
  flex-direction: row-reverse; /* 关键：视觉上反转顺序 */
  justify-content: flex-end; /* 或者 start，根据具体布局需求调整 */
  align-items: center; /* 垂直居中对齐，可选 */
}

.user-label {
  transition: 0.5s ease; /* 添加过渡效果 */
  /* 其他默认样式 */
}

.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" id="user" class="user-input" required>
    <label for="user" class="user-label">Username</label>
  </div>
</div>

/* 容器基本样式，仅为演示 */
.container {
  padding: 20px;
  background-color: #333;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 输入组样式 */
.input-group {
  display: flex;
  flex-direction: row-reverse; /* 关键：视觉上反转顺序 */
  justify-content: flex-end; /* 使内容靠右对齐 */
  align-items: center; /* 垂直居中 */
  position: relative; /* 为后续定位提供上下文 */
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 4px;
  background-color: #fff;
}

.user-input {
  border: none;
  outline: none;
  padding: 8px 10px;
  font-size: 16px;
  flex-grow: 1; /* 占据剩余空间 */
  background-color: transparent;
  z-index: 1; /* 确保输入框在标签之上 */
}

.user-label {
  position: relative; /* 相对定位，以便transform生效 */
  color: #888;
  font-size: 16px;
  padding: 8px 10px;
  cursor: text; /* 模拟可点击文本 */
  transition: 0.5s ease; /* 平滑过渡效果 */
  transform-origin: left top; /* 变换原点，使缩放更自然 */
  z-index: 0; /* 确保标签在输入框之下 */
}

/* 输入框获得焦点、激活或内容有效时的标签样式 */
.user-input:active+.user-label,
.user-input:focus+.user-label,
.user-input:valid+.user-label {
  color: dodgerblue; /* 变换后的颜色 */
  transform: translate(-10px, -20px) scale(.75); /* 向上左移动并缩小 */
  /* 根据实际设计调整translate值，以适应标签浮动效果 */
  background-color: #fff; /* 如果需要背景色覆盖 */
  padding: 2px 5px; /* 调整内边距 */
  border-radius: 3px;
}

/* 额外：当输入框有值时，确保标签也保持变换状态 */
.user-input:not(:placeholder-shown):valid+.user-label {
  color: dodgerblue;
  transform: translate(-10px, -20px) scale(.75);
  background-color: #fff;
  padding: 2px 5px;
  border-radius: 3px;
}