CSS to target checkbox labels on forms | Community
Skip to main content
Nicholas_Manojl
Nicholas_Manojl
New Participant
October 18, 2017
Solved

CSS to target checkbox labels on forms

  • October 18, 2017
  • 1 reply
  • 4871 views

I know you can target the label individually, but is there a systematic method of targeting labels that appear next to checkboxes?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by SanfordWhiteman
MktoForms2.whenReady(function(form){ 
  var formEl = form.getFormElem()[0], 
  labels = formEl.querySelectorAll('label.mktoLabel'); 
  [].slice.call(labels)
  .forEach(function(label){ 
    label.className += ' label-' + formEl.querySelector('#' + label.htmlFor).type; 
  });
});

This'll add an additional class to every <label> element that corresponds to its target element's type (class="label-checkbox", class="label-email", etc.).

1 reply

SanfordWhiteman
SanfordWhiteman
New Participant
October 18, 2017

Individual Checkbox fields, or checkboxes in a ​Checkboxes ​field?

Nicholas_Manojl
Nicholas_ManojlAuthor
New Participant
October 19, 2017

Individual checkbox fields, as in a preference centre where each checkbox changes the value of a field directly.

SanfordWhiteman
SanfordWhitemanAccepted solution
New Participant
October 19, 2017
MktoForms2.whenReady(function(form){ 
  var formEl = form.getFormElem()[0], 
  labels = formEl.querySelectorAll('label.mktoLabel'); 
  [].slice.call(labels)
  .forEach(function(label){ 
    label.className += ' label-' + formEl.querySelector('#' + label.htmlFor).type; 
  });
});

This'll add an additional class to every <label> element that corresponds to its target element's type (class="label-checkbox", class="label-email", etc.).

    Terms & ConditionsAccessibility statement

    Loading footer...