更改复选框字段的输入焦点和边距/填充

Question

我使用 CSS 更改了复选框问题的原始标签和选中框后出现的输入文本字段，但添加代码后，它删除了一些边距和填充，并且输入文本字段不再已应用焦点。

这是表单的链接：https://donorbox.org/youthminds。只需选择任意金额并单击下一步即可进入表单的第二部分。

我在下面包含了原始 HTML 代码，以及底部的前后图像。

我使用下面的 CSS 代码来更改复选框字段标签和单击框后出现的输入文本标签。

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: "Add Organization Name"; font-size: 16px; }

label[for="donation_donating_company"] { font-size: 0 !important; }
label[for="donation_donating_company"]:before { content: "Organization Name"; font-size: 16px; }

HTML：

<div class="mdl-grid "><div class="mdl-cell mdl-cell--12-col">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-js-ripple-effect--ignore-events is-upgraded is-checked" 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></div></div>

<div id="donating_company_fields" style="">
<div class="mdl-grid"><div class="mdl-cell mdl-cell--12-col">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-upgraded" data-upgraded=",MaterialTextfield">
<input class="mdl-textfield__input" autocomplete="off" data-id="text" type="text" name="donation[donating_company]" id="donation_donating_company">
<label class="mdl-textfield__label" for="donation_donating_company">Donating Company</label></div></div></div></div>

我试图看看出了什么问题，但我无法弄清楚。当任一标签更改、某些样式消失或更改时，它就会出现。我想让它恢复到以前的状态，带有边距/填充和焦点。我只能添加 CSS 和 Javascript，不能编辑 HTML。

图片：

原文： https://i.imgur.com/VlqWRLe.png 和 https://i.imgur.com/pxU4a8H.png

有 CSS 代码更改： https://i.imgur.com/ukhch56.png 和 https://i.imgur.com/48wjanL.png

Answer 1

复选框字段标签：

<script>
function addLoadEvent(func) {  
      var oldonload = window.onload;  
      if (typeof window.onload != 'function') {  
        window.onload = func;  
      } else {  
        window.onload = function() {  
          if (oldonload) {  
            oldonload();  
          }  
          func();  
        }  
      }  
    }  

   addLoadEvent(function() {  
$('label[for="is_donating_company"] .mdl-checkbox__label').text('Add Organization Name');

    });  
</script>

输入文本字段标签：

<script>function addLoadEvent(func) {  
      var oldonload = window.onload;  
      if (typeof window.onload != 'function') {  
        window.onload = func;  
      } else {  
        window.onload = function() {  
          if (oldonload) {  
            oldonload();  
          }  
          func();  
        }  
      }  
    }  

   addLoadEvent(function() {  
$('label[for="donation_donating_company"]').text('Organization Name');

    });  
</script>

Answer 2

我花了一些时间检查页面，但无法足够快地弄清楚。 如果您可以使用 javascript，只需将文本替换为 jquery。 例如： $('label[for="donation_first_name"]').text('新标签');