使用顶部为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
被划掉,然而,这是在计算值中显示的值,并且明显地应用于元素。
任何提示都将不胜感激。
答案 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>