Chrome user agent border radius overrides my style for selection

Use a jade pattern with the doctype htmltop.

Styles for inputand select:

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

inputshown correctly, but the border selectshows 5px, which is the value of the user agent, although research on the calculated tab shows that 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 appearance of the selection does not match my style?

Please note that I am not trying to get rid of or reduce the down arrow, I just want my inputand selecthad the same border-radius, but while inputlooking good, it's a strange problem occurs withselect

Dev , 5px , .

Clicking on 5px redirects to this

.

+6

Source: https://habr.com/ru/post/1016510/


All Articles