如何使用圆形边框选择下拉列表？

Question

我正在使用选择标签下拉菜单,使用css我做的选择框是圆角,通过这样做下拉菜单保持方形,我也想转向圆角.

这是现场演示

http://jsfiddle.net/ankurdhanuka/AwUHn/1/

HTML

<p class="formRight">
<span style="padding-right:100px">Lead Type: </span>

    <select id="leadType" class="box2" name="lead_type">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</p>

CSS

.formRight select {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 10px #E8E8E8 inset;
    height: 40px;
    margin: 0 0 0 25px;
    padding: 10px;
    width: 110px;
}

我们将非常感谢您的帮助.提前致谢.

Answer 1

请检查解决方案:

现场演示:https://jsfiddle.net/webx/2g5bydyo/

.selectWrapper{
  border-radius:36px;
  display:inline-block;
  overflow:hidden;
  background:#cccccc;
  border:1px solid #cccccc;
}
.selectBox{
  width:140px;
  height:40px;
  border:0px;
  outline:none;
}

<div class="selectWrapper">
  <select class="selectBox">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
</select>
</div>

Answer 2

这是我的解决方案.

CSS

.selectBox{border-radius:4px;border:1px solid #AAAAAA;}

HTML

<select class="selectBox">
.............
</select>

Answer 3

Ankur,下拉列表由用户操作系统控制,因此无法完全设置这些元素.为了实现您想要的外观,您可能希望考虑开发或使用第三方自定义下拉列表.

从看你的小提琴; Hugo Giraidel的演示5可能会为您提供所需的内容.

基本上它使用HTML <li>元素,然后使用JS/jQuery创建下拉列表效果,并带有几个基本的过渡效果.

Answer 4

你看过这个 Stackoverflow 帖子吗？
CSS - 使用 SELECT 标签时下拉框的边框半径？不是 SELECT 输入本身，而是实际的下拉框？
因为你所要求的是不可能的（或者至少不跨浏览器兼容）

为了使其工作并使其跨浏览器兼容，您必须使用 DIV 元素（或任何非表单元素）创建一个下拉列表/选择，并使用 JS/jQuery 将其值更新为隐藏选择。这样您就可以不受限制地按照您想要的方式设置 DIV 样式。

这可能会帮助您：
JQuery Auto Complete 替代 Select Drop Down