7

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.

enter image description here 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.

Clicking on 5px redirects to this

Any hints would be appreciated.

thehme
  • 2,698
  • 4
  • 33
  • 39
  • 1
    Possible duplicate of [How to style a – Christina Apr 13 '17 at 03:11
  • This is answered here: http://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript – Christina Apr 13 '17 at 03:11
  • 1
    @Christina, thanks, but both questions/answers you referenced, I have seen, and they discuss methods of making the drop down arrow go away, which I don't want to do. My question is about why if I have my own `border-radius` style, does the user agent style still override it, even when the computed details show that it should actually be my style that is shown. – thehme Apr 13 '17 at 13:17
  • 1
    This has always been the case, I don't care why so I never bothered to investigate. Unless you use -webkit-appearance: none; you can't over-ride with CSS for certain elements, whether or not your dev tools give different feedback, and all browers are different with native elements like form elements and what you can and cannot affect. – Christina Apr 13 '17 at 21:07
  • I agree that the mentioned answers in the comments solve the issue of styling the Select and Input elements. The nagging underlying question is, IMHO, "why does the browser override my defined settings?". The above mentioned posts contains [this answer](http://stackoverflow.com/a/1895485/2012120) as well, which points to the fact that select element are part of the operating system, which would imply that the browsers only delegates styling of these elements. [Further reading](http://archivist.incutio.com/viewlist/css-discuss/39858) mentioned in pavium's answer. – Sumi Straessle May 15 '17 at 07:23
  • Did you try adding "! Important" after your style definition? – Jitendar Apr 29 '18 at 05:17

1 Answers1

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>
leonheess
  • 16,068
  • 14
  • 77
  • 112