如何通过CSS仅隐藏文本输入框、文本域对应的<label>标签

核心逻辑不需要复杂选择器，ProcessWire FormBuilder渲染字段时，会自动给每个字段的最外层包裹div加上对应字段类型的专属class，基于这个原生类名写CSS就能一次适配所有同类型字段，不需要逐个字段单独配置。 #

兼容最优方案（全浏览器支持） #

直接用下面的CSS规则即可，自动匹配所有text输入框、textarea文本域对应的label，其他类型表单元素的label不受影响：

#FormBuilder_contact-form .InputfieldText .InputfieldHeader,
#FormBuilder_contact-form .InputfieldTextarea .InputfieldHeader {
  display: none;
}

原理说明：

• 所有type为text的单行输入框，外层包裹div默认自带InputfieldText类
• 所有textarea多行文本域，外层包裹div默认自带InputfieldTextarea类
• 其他类型字段（单选、多选、下拉、日期选择、文件上传等）的外层类名和这两个不重名，不会被规则命中。

之前的写法不生效的原因 #

1. 最初写的#FormBuilder_contact-form .Inputfield .InputfieldHeader会选中所有字段下的label，直接把全部label都隐藏了，不符合只隐藏两类字段的需求
2. label[for="type=text"]属性选择器用法完全错误：label的for属性存储的是关联表单元素的ID值，和表单元素的type属性没有任何关系，不可能匹配到目标
3. .InputfieldHeader input([type=text])存在两个问题：一是属性选择器语法错误，不需要额外加括号；二是.InputfieldHeader对应的label元素是input/textarea的前置兄弟节点，不是父节点，嵌套选择器无法从label选中内部的表单元素，规则自然失效。

现代浏览器可选方案（无需记忆类名） #

如果站点不需要兼容IE等老旧浏览器，可以用CSS :has()伪类实现，扩展性更强，不需要记忆FormBuilder的类名规则：

#FormBuilder_contact-form .Inputfield:has(input[type="text"], textarea) .InputfieldHeader {
  display: none;
}

这个规则的逻辑是：只要外层字段容器内存在text类型输入框或者textarea，就隐藏对应的label。后续如果需要新增隐藏其他类型字段的label，比如密码输入框，只要在:has()的括号里追加input[type="password"]即可，维护非常方便。 #

注意事项 #

如果写完样式刷新不生效，优先清理站点的CSS缓存、CDN缓存、前端页面缓存后再验证，ProcessWire的模板缓存、ProCache等缓存插件也需要同步清空。 #

内容的提问来源于stack exchange，提问作者user18735096