Chrome用户代理边框半径覆盖了我的下拉选择样式

Question

在顶部使用doctype html的jade模板。

input和select的样式：

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

input的边框半径显示正确，但是select的边框显示为5像素，这是用户代理的值，尽管在计算选项卡中进行调查显示为3像素，应该应用于上面的样式。

为什么我的样式似乎已经被应用了，但是计算值和选择器的外观与我的样式不匹配呢？

请注意，我不想摆脱或替换下拉箭头，我只想让我的input和select具有相同的border-radius，但是虽然input看起来不错，但是select出现了这种奇怪的问题。

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

任何线索将不胜感激。

- thehme

---

可能是重复的问题：如何使用仅CSS而不使用JavaScript来样式化<select>下拉菜单？ - Christina

这个问题已经在这里回答了：https://dev59.com/YXI-5IYBdhLWcg3wW3Cp - Christina

@Christina，谢谢你的回答，但是你提到的那两个问题/答案我都看过了，它们讨论的是如何去掉下拉箭头，而我并不想这样做。我的问题是，为什么如果我有自己的border-radius样式，用户代理样式仍然会覆盖它，即使计算的细节显示应该显示我的样式。 - thehme

这种情况一直存在，我不在意为什么，所以从未费心去调查。除非你使用-webkit-appearance: none;，否则你无法使用CSS覆盖某些元素，无论你的开发工具给出了不同的反馈，所有浏览器都对表单元素等本机元素有所不同，你可以影响什么和不能影响什么也不同。 - Christina

我同意评论中提到的答案解决了Select和Input元素样式的问题。然而，令人不安的潜在问题是，“为什么浏览器会覆盖我的定义设置？”上述帖子包含了这个答案，它指出选择元素是操作系统的一部分，这意味着浏览器只委托这些元素的样式。更多阅读请参见pavium的回答中提到的链接。 - Sumi Straessle

你尝试在样式定义后添加 "! important" 吗？ - Jitendar

Answer 1

这段内容有些过时，但我认为仍应该回答。您需要添加appearance: none才能对这些元素应用样式。

appearance属性用于显示一个元素，使用基于用户操作系统主题的本地平台样式。

更多细节请参见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