css - Chrome 用户代理 border-radius 覆盖了我的选择样式

Question

使用顶部带有 doctype html 的 jade 模板。

input 和 select 的样式:

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

input 的边框半径显示正确，但 select 的边框显示 5px，这是用户代理的值，即使在计算选项卡中显示显示应应用上述样式中的 3px。

怎么可能我的样式似乎已被应用，但计算值和选择的外观与我的样式不匹配？

请注意，我并不是要删除或替换下拉箭头，我只是希望我的input 和select具有相同的 border-radius，但是虽然 input 看起来不错，但 select

却出现了这个奇怪的问题

开发工具清楚地显示用户代理的边框 5px 被划掉了，然而，这是显示在计算值中并明显应用于元素的值。

如有任何提示，我们将不胜感激。

Answer 1

这有点过时了，但我认为还是应该回答一下。

您必须添加 appearance: none 才能将样式应用于这些元素。

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

有关详细信息，请参阅 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>