Chrome用户代理border-radius会覆盖我的样式以供选择

Question

doctype html在顶部使用玉模板.

对于造型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才能将样式应用于这些元素。

外观属性用于使用基于用户操作系统主题的平台本机样式来显示元素。

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