从Chrome/Webkit中的<select>元素中删除圆角

Question

Chrome的用户代理样式表为<select>元素的所有角提供了5px的边框半径.我已经尝试通过外部样式表应用半径为0px来解决这个问题,以及元素本身的内联; 我已经尝试了两种border-radius:0px,-webkit-border-radius:0px;并且我已经尝试了更具体的border-top-left-radius:0px(以及它的-webkit等价物).

没有人工作.

当我在webkit的开发人员工具中检查元素时,Computed Style仍将半径列为5px.但是,如果我单击旁边的展开箭头来查看具体内容,则会显示:element.style - 0px.在下面它显示了我给出的0px的外部css规范,以及5px的用户代理样式表规范.后两者都被划掉了,因为它们应该是.

有任何想法吗？

Answer 1

这对我有用(样式第一次出现而不是下拉列表):

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

http://jsfiddle.net/fMuPt/

Answer 2

只是我的下拉图片解决方案 (inline svg)

select.form-control {
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='#444' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
    background-position: 100% 50%;
    background-repeat: no-repeat;
}

替代方案(因为上面的一个不适用于最新的Firefox)

select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-border-radius: 0px;
    background-image: url("https://image.flaticon.com/icons/svg/60/60781.svg");
    background-position: 99% 50%;
    background-repeat: no-repeat;
    background-size: 16px;
}

我正在使用bootstrap,这就是我使用的原因select.form-control
你可以使用select{或select.your-custom-class{代替.

Answer 3

如果你想要方形边框并仍然想要小扩展箭头,我推荐这个:

select.squarecorners{
     border: 0;
     outline: 1px solid #CCC;
     background-color: white;
}

Answer 4

这里有一些很好的解决方案,但是这个不需要SVG,保留边框outline并在按钮上设置齐平.

select {
  height: 20px;
  -webkit-border-radius: 0;
  border: 0;
  outline: 1px solid #ccc;
  outline-offset: -1px;
}

<select>
 <option>Apple</option>
 <option>Ball</option>
 <option>Cat</option>
</select>

Answer 5

虽然最顶层的答案会删除边框,但它也会移除箭头,这使得用户极难(如果不是不可能)将元素标识为选择.

我的解决方案是在选择后面粘贴一个白色div(边界半径:0px).将它的位置设置为绝对值,将其高度设置为选择的高度,你应该好好去!