The theme I’m using is Chaplin. I’ve double-checked and completely removed my border – it looks like what I’m referring to is definitely not assigned by the root html. My only guess is that it’s the plugin adding a border. It’s 2px and #025fcc. I’ve got no idea how to remove it though.
Where can we see the website in question?
What do you mean by “border radius”? I don’t see any rounded corners around the submit button.
There is a blue border with rounded corners around the button, which is not part of my CSS design. It only appears upon clicking the button and stays this way unless clicked elsewhere. Visible in Chrome, not Firefox.
I’ve changed my design to red for contrast so you could see it better.
This style rule is applied:
button,
.button,
.faux-button,
.wp-block-button__link,
:root .wp-block-file__button,
input[type="button"],
input[type="reset"],
input[type="submit"],
:root .woocommerce #respond input#submit,
:root .woocommerce a.button,
:root .woocommerce button.button,
:root .woocommerce input.button {
-webkit-appearance: none;
-moz-appearance: none;
background: #007C89;
border: none;
border-radius: .3rem;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: .8888em;
font-weight: 600;
line-height: 1;
margin: 0;
padding: 1.175em 1.75em;
text-align: center;
text-decoration: none;
transition: opacity .15s linear;
}
wp-content/themes/chaplin/style.css:553
Thanks for your reply. I saw this rule, however, it doesn’t declare a border of 2px in color #025fcc that appears upon clicking. This rule has border: none.
I’ve figured it out. It must be a Chrome issue that adds this border. This line fixes it:
button:focus {outline: 0;}
Thanks for your help anyway, @takayukister. And thanks for the awesome plugin. 🙂
