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

Question

使用顶部为gpsData的玉石模板。

doctype html和input的样式：

select

input, select { ... -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } 的边框半径显示正确，但input的边框显示5px，这是用户代理的值，即使调查计算的标签显示3px，也可以从上面的样式，应该适用。

怎么可能我的风格似乎已被应用，但是计算出的值和选择的外观与我的风格不符？

请注意，我并非试图删除或替换下拉箭头，我只希望我的select和input具有相同的{{1}虽然select看起来不错，但这个奇怪的问题正在发生在border-radius

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

任何提示都将不胜感激。

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>