Can’t style the focus state of WooCommerce buttons

[sean duggan]

There doesn’t seem to be a way to style the focus state of buttons in the Customizer > Shop > Checkout and Cart dialog box, and I’ve been trying to do it with Custom CSS, but nothing is working. Surely, I don’t have to do that for every single instance, right? When a button is pressed on, it has this ugly blue outline on it before it takes you to the link. Can you tell me how to get rid of that?

screen_shot_2020-01-19_at_6.06.16_pm.png

[Nodari]

Hi Sean

Please add this custom CSS code in Appearance > customize > additional CSS and it will hide blue outline in this and other places as well:

 

.woocommerce #respond input#submit:focus, .woocommerce #respond input#submit.focus, .woocommerce a.button:focus, .woocommerce a.button.focus, .woocommerce button.button:focus, .woocommerce button.button.focus, .woocommerce input.button:focus, .woocommerce input.button.focus, .woocommerce .jupiterx-wc-loadmore:focus, .woocommerce .jupiterx-wc-loadmore.focus {
-webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0);
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0);
}

[sean duggan]

Thank you! You’re a lifesaver!

[Amir Rather]

You’re most welcome 🙂

[Author]

Posts