Site logo

Archived topic

Set all buttons and forms to round border-radius

9 replies · Started by toasterpc on May 27, 2019

Viewing posts 1–10 of 10

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?

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 :)

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?

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?

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;
}

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.

Alright!

That worked wonders!

(Widget must have been a cache fiddle...)

Seriously, thanks for the help Tom.

You're welcome :)

This archived topic is closed to new replies.