Not able to style checkbox options when using “use_label_element”

  • Resolved elsdeniep

    (@elsdeniep)


    1 year, 1 month ago

    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.

    • This topic was modified 1 year, 1 month ago by elsdeniep.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    1 year, 1 month ago

    See Styling contact form

    Thread Starter elsdeniep

    (@elsdeniep)

    1 year, 1 month ago

    Thanks a lot for your quick reply Takayuki san.
    I will try to solve the issue with this hint and report back after the weekend.

    Thread Starter elsdeniep

    (@elsdeniep)

    1 year, 1 month ago

    @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!

    • This reply was modified 1 year, 1 month ago by elsdeniep.
    • This reply was modified 1 year, 1 month ago by elsdeniep.
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Not able to style checkbox options when using “use_label_element”’ is closed to new replies.