Html 如何制作带有圆角边框的选择下拉菜单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19444347/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to make select dropdown with rounded border?
提问by Ankur Dhanuka
i am using select tag for dropdown menu, using css i made select box to be rounded corner, by doing this drop down menu remains square, i also want to turn that rounded corner.
我正在使用下拉菜单的选择标签，使用 css 我使选择框成为圆角，通过这样做下拉菜单保持方形，我也想转动那个圆角。
here is the live demo
这是现场演示
http://jsfiddle.net/ankurdhanuka/AwUHn/1/
http://jsfiddle.net/ankurdhanuka/AwUHn/1/
HTML
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
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;
}
Your Help will be appreciated. Thanks in advance.
您的帮助将不胜感激。提前致谢。
回答by webx
Please check the solution :
请检查解决方案：
Live demo : https://jsfiddle.net/webx/2g5bydyo/
现场演示：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>回答by John
This is my solution.
这是我的解决方案。
CSS
CSS
.selectBox{border-radius:4px;border:1px solid #AAAAAA;}
HTML
HTML
<select class="selectBox">
.............
</select>
回答by ???? ?????
Ankur, drop-down lists are controlled by the users operating system so full styling of these elements aren't possible. To achieve the look you desire you may wish to consider developing, or using a third-party custom drop-down list.
Ankur，下拉列表由用户操作系统控制，因此这些元素的完整样式是不可能的。为了获得您想要的外观，您可能希望考虑开发或使用第三方自定义下拉列表。
From looking at your fiddle; Demo 5by Hugo Giraidel may provide you with with what you're looking for.
从看着你的小提琴；Hugo Giraidel 的Demo 5可能会为您提供您正在寻找的东西。
Basically it uses HTML <li>elements and then using JS/jQuery it creates the drop-down list effect with a couple of basic transition effects.
基本上它使用 HTML<li>元素，然后使用 JS/jQuery 它创建带有几个基本过渡效果的下拉列表效果。
回答by Sander
Have you looked at this Stackoverflow post?
CSS - Border Radius for the drop down box when using the SELECT tag? Not the SELECT input ittself, the actual drop down box?
Because what you are asking is not possible (or at leat not cross-browser compatible)
你看过这篇 Stackoverflow 帖子吗？
CSS - 使用 SELECT 标签时下拉框的边框半径？不是 SELECT 输入本身，实际的下拉框？
因为你问的是不可能的（或者至少不是跨浏览器兼容的）
To make it work AND make it cross-browser compatible, you would have to create an dropdown/select with DIV elements (or any non form elements) and update their values with JS/jQuery to a hidden select. That way you can style the DIV the way you want without limitations.
为了使其工作并使其跨浏览器兼容，您必须使用 DIV 元素（或任何非表单元素）创建下拉列表/选择，并使用 JS/jQuery 将它们的值更新为隐藏选择。这样您就可以不受限制地按照您想要的方式设置 DIV 的样式。
This may help you out:
JQuery Auto Complete substitute for Select Drop Down
这可能对您有所帮助：
JQuery Auto Complete 替代 Select Drop Down
回答by Maksym Shemet
I don't now why, but it works when remove select default arrows
我现在不知道为什么，但它在删除选择默认箭头时有效
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;
}
