从 <select> 中删除圆角Chrome/Webkit 中的元素 [英] Removing rounded corners from a <select> element in Chrome/Webkit
问题描述
Chrome 的用户代理样式表为 元素的所有角提供了 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).
都没有工作.
当我检查 webkit 开发人员工具中的元素时，计算样式仍然将半径列为 5px.但是，如果我单击它旁边的扩展箭头以查看详细信息，它会显示: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> 中删除圆角Chrome/Webkit 中的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
