Colour of selected radio button seems backwards in Twenty Seventeen + Woocommerce

Help for a novice? I want to use the dark colour choice of Twenty Seventeen with Woocommerce. When I do so, the radio buttons on the "Checkout" page used to choose a payment method seem to be the wrong colour:

The selected radio button is black and the unselected radio button is white. On a dark background, the white button seems to be the selected one, which is quite confusing to the visitors. How can I change this?

I'm not an expert, and so am not even completely sure whether the problem is on the woocommerce or the Twenty Seventeen side, but I suspect it is with the dark theme of Twenty Seventeen, as the light theme works fine.

Help for a novice? I want to use the dark colour choice of Twenty Seventeen with Woocommerce. When I do so, the radio buttons on the "Checkout" page used to choose a payment method seem to be the wrong colour:

The selected radio button is black and the unselected radio button is white. On a dark background, the white button seems to be the selected one, which is quite confusing to the visitors. How can I change this?

I'm not an expert, and so am not even completely sure whether the problem is on the woocommerce or the Twenty Seventeen side, but I suspect it is with the dark theme of Twenty Seventeen, as the light theme works fine.

• woocommerce-offtopic
• radio

Share Improve this question edited Jan 3, 2019 at 23:56 PDS asked Jan 2, 2019 at 23:10 PDSPDS 355 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

What do you mean on a dark background? Did you change the background color? My default twenty seventeen & woo install has a white background.

Anyway, you can make CSS adjustments by going into the admin > Appearance > Customize > Additional CSS.

You can inspect the CSS on the page by hitting f12. I would recommend inspecting the elements and adjusting the CSS colors values to what you like, then copy the changes into the admin customizer.

The below screenshot shows the elements you want to adjust. Use the inspector and click on the ::before inside the active label.

After you have the colors you want copy the changes into the customizer. For example, pasting the following CSS will switch the colors of the radios (black with white & white with black).

.wc_payment_method input.input-radio[name=payment_method]:checked+label:before {
    background: #fff;
}

.wc_payment_method input.input-radio[name=payment_method]+label:before {
    border: 2px solid #000;
    box-shadow: 0 0 0 2px #fff;
    background: #000;
}