从< 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;
}
这篇关于从< select>中移除圆角。元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!