Question

我一直在堆栈上查看这个问题 - How to style a <select> dropdown with CSS only without JavaScript?并想知道是否可以使用这种技术使用圆角。

在示例中，我已经将其作为一项测试，因为选择框似乎在背景中显得不合适。我认为这种技术对于获得对盒子样式的合理控制水平是合适的，同时仍然保持本机操作系统支持，这就是我在这种情况下所追求的。如果在这种技术中使用圆角证明太难了，那么我就放弃它。

这是一个很好的jsfidle - http://jsfiddle.net/danield770/YvCHW/6/

我的css目前是这样的。

.styled-select select {
    background: transparent;
    width: 268px;
    font-size: 16px;
    line-height: 1;
    border: 0;
    height: 28px;
}

.styled-select{
    padding: 0;
    width: 240px;
    height: 28px;
    overflow: hidden;
    background: url(images/drop.png) no-repeat right #fff;
    border: 1px solid #ccc;
}

Answer 1

如果我只是在其上申请border-radius，则适用于我。

.styled-select{
    border-radius: 10px;
}

jsFiddle Demo

Answer 2

您可以使用border-radius添加圆角。 Reference

.styled{
   width: 120px;
   height: 34px;
   overflow: hidden;
   background: url(http://www.stackoverflow.com/favicon.ico) no-repeat 96% #ddd;
   border-radius: 10px;
}

FIDDLE

圆角纯CSS技术

2 个答案: