HubSpot表单输入框聚焦时向上选择label的选择器失效如何解决

问题原因 #

1. CSS本身不支持向上选择父元素、也不支持选择位于当前元素之前的兄弟节点，你写的选择器.hs-form-field input:focus + ~ .hs-form-field > label存在逻辑错误：

• +、~都是只能选中当前元素之后的同级节点，无法选中之前的节点
• input被包裹在.input容器内，和外层的label根本不是同级节点，不可能通过兄弟选择器匹配到
• .hs-form-field是input的祖先元素，CSS原生没有父元素选择器，无法通过子元素的状态直接向上选中祖先元素再匹配label

解决方案 #

方案1：使用CSS :has() 选择器（推荐，现代浏览器兼容性覆盖95%以上全球用户） #

:has()是CSS新增的父级匹配选择器，可以直接匹配包含指定状态子元素的父容器，代码修改如下：

.hs-form-field {
  position: relative;
}
.hs-form-field input, .hs-form-field textarea, .hs-form-field select {
  outline: 0;
  padding: 15px;
  width: 50%;
}
.hs-form-field > label {
  position: absolute;
  top: 50%;
  left: 0;
  transition: all 0.3s ease-in;
  transform: translate(15px, -50%);
  pointer-events: none;
}
.hs-form-field input:focus {
  color: red;
}
/* 输入框聚焦时label上移 */
.hs-form-field:has(input:focus, textarea:focus, select:focus) > label {
  transform: translate(10px, -30px);
}
/* 可选：输入框有内容时保持label上移，避免失焦后label盖住输入内容 */
.hs-form-field:has(input:not(:placeholder-shown), textarea:not(:placeholder-shown), select:not(:placeholder-shown)) > label {
  transform: translate(10px, -30px);
}

该方案无需修改HubSpot原生DOM结构，纯CSS即可实现效果。

方案2：JS兼容方案（适配不支持:has()的旧浏览器） #

如果需要兼容IE或老旧版本浏览器，可以通过少量JS实现：

document.querySelectorAll('.hs-form-field input, .hs-form-field textarea, .hs-form-field select').forEach(input => {
  const fieldWrap = input.closest('.hs-form-field');
  // 聚焦时添加激活类
  input.addEventListener('focus', () => {
    fieldWrap.classList.add('field-active');
  });
  // 失焦时判断输入内容，为空则移除激活类
  input.addEventListener('blur', () => {
    if(input.value.trim() === '') {
      fieldWrap.classList.remove('field-active');
    }
  });
  // 初始化处理已有内容的输入框
  if(input.value.trim() !== '') {
    fieldWrap.classList.add('field-active');
  }
})

对应补充CSS：

.hs-form-field.field-active > label {
  transform: translate(10px, -30px);
}

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