Skip to main content
Nicholas_Manojl
Nicholas_Manojl
Level 8
Oct 18, 2017 11:54 PM UTC
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
User Group Leader
Oct 19, 2017 4:02 AM UTC
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 in thread

7 replies

SanfordWhiteman
User Group Leader
SanfordWhitemanUser Group Leader
User Group Leader
Oct 18, 2017 11:59 PM UTC

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

Translate
Nicholas_Manojl
Nicholas_ManojlAuthor
Level 8
Oct 19, 2017 12:06 AM UTC

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

Translate
SanfordWhiteman
User Group Leader
SanfordWhitemanUser Group LeaderAccepted solution
User Group Leader
Oct 19, 2017 4:02 AM UTC
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...