Chrome user agent border-radius overrides my style for select

Question

Using jade template with doctype html at the top.

Styling for input and select:

input, select {
   ...
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
}

input's border radius is shown correctly, but the select's border shows 5px, which is the user agent's value, even though investigating in the calculated tab shows 3px, from the style above, should be applied.

How is it possible that my style seems to have been applied, but the calculated value and the look of the select, do not match my style?

Please note that I am not trying to get rid of or replace the drop down arrow, I just want my input and select to have the same border-radius, but while the input looks good, this weird issue is happening with the select

Dev tools clearly shows that the user agent's 5px for border is being crossed off, and yet, this is the value being shown in the calculated value and visibly being applied to the element.

Any hints would be appreciated.

Answer 1

This is a little dated but I figured it should be answered nevertheless.

You have to add appearance: none to apply styling to those elements.

The appearance property is used to display an element using a platform-native styling based on the users' operating system's theme.

For more details see https://css-tricks.com/almanac/properties/a/appearance/

input, select {
  width: 150px;
  border-radius: 50%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

<select>
  <option>foo</option>
  <option>bar</option>
</select>
<br>
<br>
<input>