CSS如何制作带有关联提示的表单域_利用flexbox自动排列-css教程-PHP中文网

label 必须通过 for 属性与 input 的 id 匹配才能实现点击聚焦和语义识别；.hint 需为 input 同级后续兄弟，用 input:focus + .hint 或 input:not(:placeholder-shown) + .hint 控制显隐；flex 布局中应将每组 label/input/.hint 包入独立容器并设 flex-direction: column，避免错位。

css如何制作带有关联提示的表单域_利用flexbox自动排列

label 和 input 怎么绑定才能触发关联提示

必须用 for 属性和 id 匹配，否则点击 label 不会聚焦 input，屏幕阅读器也无法识别语义关系。常见错误是只写 name 或漏掉 id：

<label for="email">邮箱</label><input id="email" type="email"> ✅
<label>邮箱</label><input name="email"> ❌（无绑定）
<label for="email">邮箱</label><input id="mail"> ❌（id 不一致）

绑定后，CSS 才能用 label + input:focus ~ .hint 或 input:focus + .hint 这类相邻/后续兄弟选择器控制提示显示。

flexbox 排列表单域时为什么 hint 不换行或错位

因为 .hint 默认是块级元素，而 flex 容器（如 display: flex 的 form 或 div）会让所有子元素强行 inline 排列，除非显式设置 flex-basis 或 width。更稳妥的做法是把每组 label、input、.hint 包进一个 div，再对这个容器设 display: flex; flex-direction: column;：

<div class="field">
  <label for="phone">手机号</label>
  <input id="phone" type="tel"><small class="hint">请填写11位中国大陆手机号</small>
</div>

然后让所有 .field 在父容器中 flex 横向排列（flex-wrap: wrap 支持响应式断行），或纵向堆叠（flex-direction: column）。

如何让 hint 只在 input 聚焦/输入时显示

纯 CSS 方案依赖伪类和兄弟选择器，但注意：只有 input:focus + .hint 能匹配紧邻的后续兄弟，input:focus ~ .hint 可匹配任意后续兄弟，但不能跨父级。所以 HTML 结构必须保证 .hint 是 input 的同级且在其后：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

✅ 正确结构：<input><small class="hint">…</small>
❌ 错误结构：<input><div><small class="hint">…</small></div>（.hint 不是 input 的直接兄弟）

CSS 示例：

.hint {
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 0.2s, height 0.2s;
}
input:focus + .hint,
input:not(:placeholder-shown) + .hint {
  opacity: 1;
  height: auto;
}

这里用了 :not(:placeholder-shown) 兼容非空输入态提示，比仅靠 :focus 更实用。