使用 CSS 和/或 Javascript 编辑复选框问题标签答案

【问题标题】：Edit Checkbox Question Label with CSS and/or Javascript使用 CSS 和/或 Javascript 编辑复选框问题标签
【发布时间】：2019-05-19 06:29:22
【问题描述】：

我正在尝试更改复选框问题的标签。我无法访问 HTML，所以我只能使用 CSS 和/或 Javascript。

我想用组织名称替换原来的标签此捐赠代表公司。

我尝试使用下面的 CSS 代码，但它只是在原始文本之前添加了替换文本（参见底部的图像）。该代码可用于更改文本字段标签，但似乎不适用于复选框标签。

label[for="is_donating_company"] {
  font-size: 0 !important;
}

label[for="is_donating_company"]:before {
  content: "Organization Name";
  font-size: 16px;
}

<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-js-ripple-effect--ignore-events is-upgraded" for="is_donating_company" data-upgraded=",MaterialCheckbox,MaterialRipple" style="height: 24px;">
<input type="checkbox" name="is_donating_company" id="is_donating_company" class="mdl-checkbox__input">
<span class="mdl-checkbox__label">This donation is on behalf of a company</span>
<span class="mdl-checkbox__focus-helper"></span><span class="mdl-checkbox__box-outline">
<span class="mdl-checkbox__tick-outline"></span></span>
<span class="mdl-checkbox__ripple-container mdl-js-ripple-effect mdl-ripple--center" data-upgraded=",MaterialRipple">
<span class="mdl-ripple"></span></span>
</label>

图片：https://i.imgur.com/pUpWXZj.png 和 https://i.imgur.com/TVt1cC1.png

【问题讨论】：

请也添加您的html，仅提供此信息是无法解决的
我刚加了！
我正在尝试将原始标签“此捐赠代表公司”替换为“组织名称”。

标签： javascript css

【解决方案1】：

仅依赖于 CSS 的情况的可能解决方案：

label[for="is_donating_company"] span.mdl-checkbox__label { font-size: 0 !important; }
label[for="is_donating_company"] span.mdl-checkbox__label:after { content: "Organization Name"; font-size: 16px; }

<label for="is_donating_company">
  <input type="checkbox" name="is_donating_company" id="is_donating_company" class="mdl-checkbox__input">
  <span class="mdl-checkbox__label">This donation is on behalf of a company</span>
</label>

【讨论】：