仅使用CSS实现输入框空值样式控制及特殊场景交互优化

嘿，我完全懂你遇到的这个浮动标签问题——非必填字段空着的时候标签居然也上浮，还有email输入框的逻辑不符合预期，对吧？咱们完全可以只用CSS解决这些问题，不用写JS！

问题根源分析 #

原来的代码里用了:valid伪类来触发标签上浮，但这里有两个坑：

• 对于非必填输入框，空输入本身就属于“合法”状态，所以:valid会被触发，导致标签错误上浮。
• 对于email输入框，只要输入内容符合email格式，:valid就会生效，哪怕输入框还处于聚焦状态，不符合你想要的“输入有效email且失去焦点后才让标签上浮”的需求。

纯CSS解决方案 #

咱们用:placeholder-shown伪类（判断输入框是否显示占位符，也就是是否为空）和更精准的伪类组合来解决这些问题，步骤如下：

1. 调整HTML结构

首先给输入框和标签套一个相对定位的容器，同时给所有输入框加一个空的placeholder（这是:placeholder-shown生效的前提）：

<!-- 必填文本输入框 -->
<div class="input-group">
  <input type="text" class="input input-form" required placeholder=" ">
  <label class="label-animated">Your Name</label>
</div>

<!-- 非必填文本输入框 -->
<div class="input-group">
  <input type="text" class="input input-form" placeholder=" ">
  <label class="label-animated">Optional Info</label>
</div>

<!-- Email输入框 -->
<div class="input-group">
  <input type="email" class="input input-form" placeholder=" ">
  <label class="label-animated">Your Email</label>
</div>

2. 更新CSS代码

先给容器加相对定位，再调整触发标签上浮的选择器：

/* 输入框容器：让绝对定位的标签相对于输入框定位 */
.input-group {
  position: relative;
  margin: 2rem 0;
  width: 100%;
  max-width: 350px; /* 可根据你的布局调整 */
}

.label-animated {
  position: absolute;
  left: 1.6rem;
  top: 1rem;
  cursor: text;
  font-size: medium;
  transition: .5s ease;
  background-color: var(--bg-100) !important;
}

.input.input-form {
  width: 100%;
  font-size: medium;
  padding: 1rem;
  padding-bottom: .5rem;
  border: .0625rem solid var(--border-200);
  border-radius: 30rem;
  outline: none;
  background-color: transparent;
}

/* 普通输入框（非email）：聚焦 或 有内容时，标签上浮 */
.input.input-form:not([type="email"]):focus ~ .label-animated,
.input.input-form:not([type="email"]):not(:placeholder-shown) ~ .label-animated {
  top: -.72rem !important;
  left: 2rem;
  color: var(--accent-500);
}

/* Email输入框：仅当输入有效email且失去焦点时，标签上浮 */
.input.input-form[type="email"]:valid:not(:focus) ~ .label-animated {
  top: -.72rem !important;
  left: 2rem;
  color: var(--accent-500);
}

/* 可选：如果希望Email输入框聚焦时，只要有内容就上浮标签（不管是否有效），可以加上下面这行 */
/* .input.input-form[type="email"]:focus:not(:placeholder-shown) ~ .label-animated {
  top: -.72rem !important;
  left: 2rem;
  color: var(--accent-500);
} */

效果验证 #

• 必填输入框：页面加载时空，标签在输入框内；聚焦时上浮；输入内容后保持上浮；清空内容后标签回到原位。
• 非必填输入框：页面加载时空，标签在输入框内；聚焦时上浮；输入内容后保持上浮；清空内容后标签回到原位（不会因为空输入的valid状态错误上浮）。
• Email输入框：页面加载时空，标签在输入框内；聚焦输入无效内容时，标签保持原位；输入有效email并失去焦点后，标签上浮；清空内容后标签回到原位。

这样就完美匹配你想要的所有交互逻辑啦！

备注：内容来源于stack exchange，提问作者Hoppix