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

时间:2017-04-12 21:25:51

标签: css google-chrome select google-chrome-devtools

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

doctype htmlinput的样式:

select

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

enter image description here 怎么可能我的风格似乎已被应用,但是计算出的值和选择的外观与我的风格不符?

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

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

Clicking on 5px redirects to this

任何提示都将不胜感激。

1 个答案:

答案 0 :(得分:0)

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

您必须添加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>