Not able to style checkbox options when using “use_label_element”
-
For the sake of Google Page Speed Insights, we want to add labels to the checkboxes by using the use_label_element tag.
However, when using the use_label_element tag, it is no longer possible to style the checkboxes.
See below code, with and without use-label-element tag.This form element can be styled with css classes:
Materiaal* [checkbox* materiaal "staal, ijzer" "RVS/INOX, roestvaststaal, roestvrijstaal" "koper, messing, brons" "zamak" "aluminium" "metaal-soort is onbekend"]This form element CANNOT be styled with css classes:
Materiaal* [checkbox* materiaal use_label_element "staal, ijzer" "RVS/INOX, roestvaststaal, roestvrijstaal" "koper, messing, brons" "zamak" "aluminium" "metaal-soort is onbekend"]Is this a known issue of using the use_label_element or is there is simple work around?
Thanks a lot in advance for thinking with me.The page I need help with: [log in to see the link]
-
@takayukister thanks a lot for setting us on the right track. We managed to edit the class of the checkbox label in the theme’s additional css like so:
.wpcf7-list-item-label {
font-weight: 300;
}Result is: Google has no more problems with the missing labels and the styling is in line with the rest of the form.
Contact Form 7 never disappoints us!
- The topic ‘Not able to style checkbox options when using “use_label_element”’ is closed to new replies.
