如何在移除 required 属性后仍保持 CSS 输入框浮动标签效果-html教程-PHP中文网

如何在移除 required 属性后仍保持 CSS 输入框浮动标签效果

本文详解如何利用 :placeholder-shown 与 :not() 伪类替代 :valid，实现在无 required 属性时仍能稳定触发输入框标签上浮、占位符隐藏等交互动效，兼容现代浏览器且无需 JavaScript。

本文详解如何利用 `:placeholder-shown` 与 `:not()` 伪类替代 `:valid`，实现在无 `required` 属性时仍能稳定触发输入框标签上浮、占位符隐藏等交互动效，兼容现代浏览器且无需 javascript。

在构建现代化表单时，浮动标签（Floating Label）是一种广受青睐的 UX 模式：初始状态下标签显示在输入框下方，用户聚焦或输入内容后，标签平滑上浮并缩小，为输入内容腾出视觉空间。常见实现依赖 input:valid ~ label 配合 required 属性——但一旦移除 required（例如用于非必填字段），:valid 将始终为假，整个 CSS 效果即告失效。

根本原因在于 :valid 仅在表单验证通过时生效；对普通文本输入框而言，若无 required、pattern 或其他约束，空值也视为“有效”，导致状态无法准确反映用户是否已输入内容。

✅ 正确解法是转向语义更精准的伪类组合：

input:not(:placeholder-shown) ~ label

该选择器表示「当输入框未显示 placeholder（即用户已输入至少一个字符）时，选中其后的兄弟 label」。它不依赖表单验证逻辑，纯粹基于用户交互状态，天然适配可选字段。

✅ 实现步骤与关键要点

必须添加 placeholder 属性（即使为空字符串）
:placeholder-shown 仅在具有 placeholder 属性时才可能触发。推荐显式设为 placeholder=""，既保持 DOM 合法性，又避免视觉干扰：
```
<input type="text" placeholder="">
```

合并焦点态与输入态样式
为确保标签在聚焦（空值时）和输入（非空时）均上浮，应同时声明两种状态：

.input-data input:focus ~ label,
.input-data input:not(:placeholder-shown) ~ label {
  transform: translateY(-20px);
  font-size: 14px;
  color: #2e4f5c;
  transition: all 0.3s ease;
}

标签需正确布局与定位
label 必须是 input 的后续兄弟元素（满足 ~ 通用兄弟选择器要求），且使用 position: absolute 脱离文档流，并设置 pointer-events: none 防止遮挡输入：

<div class="input-data">
  <input type="text" placeholder=""><div class="underline"></div>
  <label for="">Empresa</label>
</div>

.input-data label {
  position: absolute;
  pointer-events: none;
  bottom: 10px; /* 初始位置 */
  left: 0;
  font-size: 16px;
  transition: all 0.3s ease;
}

下划线动画同步优化（可选增强）
原示例中下划线激活依赖 :valid，同样需替换为 :not(:placeholder-shown) 以保持一致性：
```
.input-data input:focus ~ .underline:before,
.input-data input:not(:placeholder-shown) ~ .underline:before {
  transform: scaleX(1);
}
```

⚠️ 注意事项与兼容性

浏览器支持：:placeholder-shown 已获 Chrome 47+、Firefox 51+、Safari 9.1+、Edge 79+ 全面支持（CanIUse 数据）。如需支持旧版 IE，需降级为 JavaScript 监听 input 事件。
placeholder 内容可见性：若设置 placeholder="Nome"，用户首次聚焦时会短暂显示文字，可能干扰设计。建议统一使用 placeholder=""，完全由 CSS 控制标签行为。
无障碍访问：确保 label 元素具有 for 属性（或包裹 input），并验证屏幕阅读器能正确关联标签与控件。

✅ 完整工作示例（精简版）

<div class="input-data">
  <input type="text" placeholder="" id="empresa"><div class="underline"></div>
  <label for="empresa">Empresa</label>
</div>

.input-data {
  position: relative;
  margin: 20px 0;
}
.input-data input {
  width: 100%;
  padding: 12px 0;
  border: none;
  border-bottom: 2px solid #ccc;
  font-size: 17px;
}
.input-data input:focus {
  border-bottom-color: #2e4f5c;
}
.input-data label {
  position: absolute;
  bottom: 10px;
  left: 0;
  font-size: 16px;
  color: #666;
  pointer-events: none;
  transition: all 0.3s ease;
}
.input-data input:focus ~ label,
.input-data input:not(:placeholder-shown) ~ label {
  transform: translateY(-20px);
  font-size: 14px;
  color: #2e4f5c;
}
.input-data .underline:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #2e4f5c;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.input-data input:focus ~ .underline:before,
.input-data input:not(:placeholder-shown) ~ .underline:before {
  transform: scaleX(1);
}

通过此方案，你可彻底摆脱对 required 的依赖，在保持纯 CSS 实现的同时，赋予每个输入框独立、可靠的状态感知能力——让表单体验更灵活、更专业。