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

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

这是我的解决方案。

<强> CSS

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

<强> HTML

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

Answer 2

请检查解决方案：

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

Ankur，下拉列表由用户操作系统控制，因此无法对这些元素进行完整样式设置。为了实现您想要的外观，您可能希望考虑开发或使用third-party custom drop-down list。

从看你的小提琴; Hugo Giraidel的Demo 5可能会为您提供您正在寻找的东西。

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

Answer 4

你看过这篇Stackoverflow帖子了吗？
CSS - Border Radius for the drop down box when using the SELECT tag? Not the SELECT input ittself, the actual drop down box?
因为你所要求的是不可能的（或者是leat而不是跨浏览器兼容）

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

这可能会帮助你：
JQuery Auto Complete substitute for Select Drop Down

Answer 5

我现在不为什么，但是当删除选择默认箭头时它可以工作

select {
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
}

select::-ms-expand {
  /* For IE10 */
  display: none;
}

select {
  border-radius: 20px;
  width: 100px;
  height: 40px;
  padding-right: 10px;
  padding-left: 10px;
}