0

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

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

这是一个不错的 jsfiddle - 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;
}
4

2 回答 2

1

如果我只是申请border-radius它，对我有用。

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

jsFiddle 演示

于 2013-01-20T17:18:22.627 回答
1

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

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

小提琴

于 2013-01-20T17:19:40.297 回答