Изменить фокус ввода и поля / отступы для поля флажка

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 ('New Label');