更改复选框字段的输入焦点和 Margin/Padding

Question

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

这是 link 的形式：https://donorbox.org/youthminds。只需 select 任意金额，然后单击下一步即可进入表格的第二部分。

我在下面包含了原始 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>

我试着看看出了什么问题，但我想不通。当任何一个标签被更改时，它都会出现，一些样式会消失或被更改。我想让它恢复到以前的状态，使用 margin/padding 和焦点。我只能添加CSS和Javascript，我无法编辑HTML。

图片：

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

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

Answer 1

我花了一些时间检查页面，但没能很快弄清楚。如果可以使用 javascript，只需将文本替换为 jquery。例如： $('label[for="donation_first_name"]').text('New Label');

Answer 2

复选框字段标签：


<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>

更改复选框字段的输入焦点和 Margin/Padding

Change Input Focus and Margin/Padding for Checkbox Field

javascript

css

focus