使用CSS和/或JavaScript修改复选框问题标签

你的问题出在目标元素定位错误上：之前的CSS是直接作用于<label>标签，但实际显示的文本是在label内部的<span class="mdl-checkbox__label">子元素里，所以才会出现新旧文本叠加的情况。下面给你两种可行的解决方案：

方案一：使用CSS修正 #

直接定位到承载文本的span元素，隐藏原文本并替换为新内容：

/* 隐藏原始标签文本 */
label[for="is_donating_company"] .mdl-checkbox__label {
  font-size: 0 !important;
}
/* 添加新的标签文本 */
label[for="is_donating_company"] .mdl-checkbox__label:before {
  content: "Organization Name";
  font-size: 16px;
}

方案二：使用JavaScript（更直接可靠） #

如果担心CSS优先级或者伪元素的兼容性问题，用JS直接修改DOM文本会更稳妥：

// 定位到包含标签文本的span元素
const targetLabel = document.querySelector('label[for="is_donating_company"] .mdl-checkbox__label');
// 检查元素是否存在，避免报错
if (targetLabel) {
  targetLabel.textContent = "Organization Name";
}

为什么之前的CSS无效？ #

你之前的代码把<label>的字体设为0，但内部的<span class="mdl-checkbox__label">依然会显示原文本；同时给<label>添加的:before伪元素会出现在整个label内容的最前方，最终导致新旧文本同时显示。

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