In Chrome, adding border-radius also adds a background colour. Why? - css

Question

I'm trying to add border-radius to an input submit button, but when I do, Chrome is also adding a grey background colour and a box shadow.
How can I just use border-radius to round the corners, and keep the background colour white, and have no box-shadow?
Here's my HTML:
<input type="submit" id="nm-match" class="nm-button" value="Match" />
And my CSS:
.nm-button {
border-radius: 5px;
}
Here's a demo of the problem: http://jsfiddle.net/CJg43/3/

Answer 1

Use your inspector on chrome and scroll to the element .m-button. (for the quickest way right click directly on the button and say inspect element) If you look on the Elements tab (which should be the first one popped up and look on the right side at the styles section it will show all the css styles being applied to that element whether they were put there by you or by chrome (the cool thing about this styles section is the styles are in order of precedence so you can easily tell which styles overwrite which (that being the higher styles overwrite the lower ones)) or even if they are the default for an element (example display: block; are always on block level elements like divs.) This is a handy tool.
So if you do this in your case you will see that chrome applies different styles to input styles. These are mostly being applied because the input[type="submit"]. If you want to overwrite these styles for the most part just overwriting the same styles in your class on your button should suffice. adding the following should be fine if you only want to overwrite the styles for the background color the "box-shadow" (which it's actually the border that is creating that shadow so just add a new border)
.nm-button {
border-radius: 5px;
background-color: #fff;
border: 1px solid #ccc;
}
Also since it's a button suggest something like the following code so it looks clickable.
.nm-button:hover {
background-color: #ddd;
cursor: pointer;
}
Here are the styles put there by chrome in your case. It's alot but chrome also is very minimalistic in it's approach so that all of this is easily overwritable. (P.S. I hope this helped, feel free to leave a comment if you have any questions.)
input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
padding: 1px 6px;
}
user agent stylesheetinput[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
align-items: flex-start;
text-align: center;
cursor: default;
color: buttontext;
padding: 2px 6px 3px;
border: 2px outset buttonface;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background-color: buttonface;
box-sizing: border-box;
}
user agent stylesheetinput[type="button"], input[type="submit"], input[type="reset"] {
-webkit-appearance: push-button;
white-space: pre;
}
user agent stylesheetinput, input[type="password"], input[type="search"], isindex {
-webkit-appearance: textfield;
padding: 1px;
background-color: white;
border: 2px inset;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
cursor: auto;
}
user agent stylesheetinput, textarea, keygen, select, button, isindex {
margin: 0em;
font: -webkit-small-control;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
}
user agent stylesheetinput, textarea, keygen, select, button, isindex, meter, progress {
-webkit-writing-mode: horizontal-tb;
}