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.


<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

  • 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.com. – Jacob Peattie Feb 20 at 12:59

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.

  • Thanks for the comment, but I removed codepen link, because it misleading people. It's just styling example what I found in codepen. – Cecil_FF Feb 20 at 12:37
  • Any way If I right understanding your probleme you should use pseudo selectors for apply some propertis to elements cause you can't get them by IDs – Volodymyr Feb 20 at 12:38
  • Try this input[value="sauce"] + label { color: red; } It from your jsfiddle – Volodymyr Feb 20 at 13:34
  • I believe the Woocommerce Custom Fields has some hooks in particular for your form. Add specific classes to checkboxes and his labels and style them. – Volodymyr Feb 20 at 13:40

Not the answer you're looking for? Browse other questions tagged or ask your own question.