Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 4 years ago.

I'm trying to override default input checkbox styles, but not good result.

First of all these checkboxes and labels have unique ID. But if I try edit these checkboxes, no effect, because every checkbox and label has unique ID. I use this plugin Woocommerce Custom Fields.

Can someone push me to the right direction how I can styling these checkboxes? Thank you.

Example:

<input type="checkbox" value="sauce" checked="checked" name="wccf[product_field][82][]" id="wccf_product_field_toppings_sauce" class="wccf wccf_product_field wccf_checkbox wccf_product_field_checkbox" data-wccf-field-id="82">

<label for="wccf_product_field_toppings_sauce">Sauce</label>

Update: jsfiddle link

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 4 years ago.

I'm trying to override default input checkbox styles, but not good result.

First of all these checkboxes and labels have unique ID. But if I try edit these checkboxes, no effect, because every checkbox and label has unique ID. I use this plugin Woocommerce Custom Fields.

Can someone push me to the right direction how I can styling these checkboxes? Thank you.

Example:

<input type="checkbox" value="sauce" checked="checked" name="wccf[product_field][82][]" id="wccf_product_field_toppings_sauce" class="wccf wccf_product_field wccf_checkbox wccf_product_field_checkbox" data-wccf-field-id="82">

<label for="wccf_product_field_toppings_sauce">Sauce</label>

Update: jsfiddle link

• theme-development
• woocommerce-offtopic
• css

• Why does it matter that they have a unique ID? Also generic HTML and CSS questions are off topic here, and best asked on stackoverflow. – Jacob Peattie Commented Feb 20, 2021 at 12:59

1 Answer 1

What about something like this?

.form-group:first-child {
  color: red;
}

.form-group:first-child > label {
  font-size: 12em;
}

I've changed your example from Codepen.