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

我花了一些时间检查页面，但无法迅速找出。如果可以使用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>

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

2 个答案: