修复Checkbox字段输入焦点与边距/内边距异常问题

我之前在修改Material Design Lite（MDL）构建的表单时也碰到过一模一样的问题——用CSS替换标签文本后，组件的间距和交互突然失效了。咱们一步步来解决：

问题根源 #

你用font-size: 0 !important隐藏原标签文本的方式，会彻底破坏MDL组件的内部布局逻辑：

• MDL的复选框和文本字段组件依赖原标签的尺寸（高度、宽度）来设置margin/padding和对齐方式，font-size:0会让原标签的尺寸塌陷，导致边距丢失
• 输入框的焦点问题，是因为修改mdl-textfield__label的样式后，MDL的JS无法正确识别标签的交互区域，点击标签时无法触发输入框聚焦

解决方案 #

1. 安全替换标签文本（保留原组件布局） #

不要用font-size:0隐藏原文本，改用text-indent把原文本移出可视区域，同时保留标签元素的原有尺寸，这样MDL的样式就不会乱掉：

/* 替换复选框标签文本 */
label[for="is_donating_company"] span.mdl-checkbox__label {
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  padding: inherit; /* 保留原标签内边距，避免间距丢失 */
}
label[for="is_donating_company"] span.mdl-checkbox__label:after {
  content: "Add Organization Name";
  font-size: 16px;
  position: absolute;
  left: 0;
  text-indent: 0;
  line-height: inherit; /* 继承原标签行高，保证对齐一致 */
}

/* 替换输入框标签文本 */
label[for="donation_donating_company"] {
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
}
label[for="donation_donating_company"]:before {
  content: "Organization Name";
  font-size: 16px;
  position: absolute;
  left: 0;
  text-indent: 0;
  line-height: inherit;
}

2. 修复输入框焦点问题 #

如果上面的CSS还是无法让输入框获得焦点，添加一段JS来强制绑定标签的点击事件到输入框：

// 点击自定义标签时，触发输入框聚焦并更新MDL组件状态
const companyLabel = document.querySelector('label[for="donation_donating_company"]');
const companyInput = document.getElementById('donation_donating_company');

if (companyLabel && companyInput) {
  companyLabel.addEventListener('click', function(e) {
    e.preventDefault();
    companyInput.focus();
    // 重新初始化MDL文本字段，确保样式状态正常
    if (window.componentHandler) {
      componentHandler.upgradeElement(companyInput.closest('.mdl-textfield'));
    }
  });
}

3. 微调边距（如果需要） #

如果还有细微的间距差异，可以手动添加margin/padding来匹配原样式，比如：

/* 调整复选框区域的上下边距 */
label[for="is_donating_company"] {
  margin: 12px 0 !important;
}

/* 调整输入框标签的位置 */
label[for="donation_donating_company"] {
  margin-top: 8px !important;
}

这样修改后，既能保留你需要的自定义标签文本，又不会破坏原表单的边距和交互功能。

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