Set all buttons and forms to round border-radius

[toasterpc]

Hello,

At last, it seems I’m almost ready for launch 🙂

Now, all I’m missing is to set every button and form element (text, numbers, etc.) to a single border-radius parameter.

Is there any way to set this with a filter?

[Tom]

Hi there,

Try this CSS:

input,
select, 
textarea,
.wp-block-button .wp-block-button__link, 
a.button, 
a.button:visited, 
button, 
html input[type=button], 
input[type=reset], 
input[type=submit],
.woocommerce #respond input#submit, 
.woocommerce a.button, 
.woocommerce button.button, 
.woocommerce input.button {
    border-radius: 5px;
}

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[toasterpc]

That worked great! Thank you.

By the way, would there be a way to apply the same roundness to the WooCommerce quantity buttons and tables?

[Tom]

For the quantity buttons, try this:

.do-quantity-buttons form .quantity:not(.buttons-added):before, 
.woocommerce form .quantity.buttons-added .minus {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.do-quantity-buttons form .quantity:not(.buttons-added):after, 
.woocommerce form .quantity.buttons-added .plus {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

Which tables exactly?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[toasterpc]

https://collare.com.mx/tienda/collares/collar-4-aros-personalizado/

The ones used in this page, they were added by WooCommerce PPOM.

[Tom]

That’s much harder, as the borders are all over the place. You could try this:

.woocommerce div.product form.cart .table-striped {
    border: 1px solid #ddd;
    border-radius: 30px;
}

th {
    border: 0;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[toasterpc]

Alright, that worked.

Thank you!

It seems that both the tables and buttons within the checkout page still won’t budge, though.

The buttons inside sidebar widgets,too.

[Tom]

I just adjusted your CSS above to work on the checkout as well: https://generatepress.com/forums/topic/set-all-buttons-and-forms-to-round-border-radius/#post-912655

Your buttons in the sidebar look rounded to me?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[toasterpc]

Alright!

That worked wonders!

(Widget must have been a cache fiddle…)

Seriously, thanks for the help Tom.

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts