从< select>中移除圆角。元素 [英] Removing rounded corners from a <select> element in Chrome/Webkit

问题描述

Chrome的用户代理样式表为< select> 元素的所有角提供了5px的边框半径。我试图摆脱这一点，通过我的外部样式表应用半径为0px，以及内联在元素本身;我尝试过 border-radius：0px 和 -webkit-border-radius：0px; 尝试了更具体的 border-top-left-radius：0px （以及它的-webkit等效）。

The user-agent stylesheet for Chrome gives a border-radius of 5px to all the corners of a <select> element. I've tried getting rid of this by applying a radius of 0px through my external stylesheet, as well inline on the element itself; I've tried both border-radius:0px and -webkit-border-radius:0px; and I've tried the even more specific border-top-left-radius:0px (along with it's -webkit equivalent).

None are working。

None are working.

当我在webkit的开发工具中检查元素时，Computed Style仍然将半径列为5px。但是如果我单击它旁边的expander箭头来查看细节，它读取：element.style - 0px。下面它显示了我给出的0px的外部css规范，以及5px的用户代理样式表规范。

When I examine the element in webkit's developer tools, the Computed Style still lists the radius as 5px. But if I click the expander arrow next to it to see the specifics, it reads: element.style - 0px. And below that it shows the external css specification I gave of 0px, along with the user-agent stylesheet specification of 5px. And both of those latter two are crossed out, as they should be.

任何想法？

推荐答案

这适用于我（样式的第一个外观不是下拉列表）：

This works for me (styles the first appearance not the dropdown list):

select {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
}

http://jsfiddle.net/fMuPt/

这篇关于从< select>中移除圆角。元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！