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

CSS to target checkbox labels on forms

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.
SanfordWhiteman
SanfordWhitemanAccepted solution
Level 10
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.).

View reply

7 replies

SanfordWhiteman
SanfordWhiteman
Level 10
October 18, 2017

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

Translate
Nicholas_Manojl
Nicholas_ManojlAuthor
Level 8
October 19, 2017

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

Translate
SanfordWhiteman
SanfordWhitemanAccepted solution
Level 10
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.).

Translate
    Terms & ConditionsAccessibility statement

    Loading footer...