如何制作带有圆角边框的选择下拉菜单？

Posted 2023-03-11

【中文标题】如何制作带有圆角边框的选择下拉菜单？

【英文标题】：how to make select dropdown with rounded border?

【发布时间】：2013-10-26 23:36:18

【问题描述】：

我正在使用下拉菜单的选择标签，使用 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;

您的帮助将不胜感激。提前致谢。

【问题讨论】：

这些控件由操作系统处理，因此您不妨考虑使用 CSS 和 JS 创建自己的下拉列表。

@MatthewBaker 如何创建我们自己的下拉列表？

@AnkurDhanuka 您可以使用 html 和 JS 创建自己的样式下拉列表。你可以试试这样的 jQuery 插件：dev7studios.com/dropit

阅读这个问题：***.com/questions/8927974/…

我猜你不能以你想要的方式设置选择选项！！！尝试一些替代方法，例如使用 作为选项的 标签并设置它们的样式......这将是非常简单的方法

【参考方案1】：

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

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

这可能会对您有所帮助：JQuery Auto Complete substitute for Select Drop Down

【参考方案2】：

Ankur，下拉列表由用户操作系统控制，因此这些元素的完整样式是不可能的。为了获得您想要的外观，您不妨考虑开发或使用third-party custom drop-down list。

看着你的小提琴； Demo 5 by Hugo Giraidel 可能会为您提供所需的内容。

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

【讨论】：

使用自定义选择通常以糟糕的用户体验告终。很难创建具有良好可访问性的良好选择框。这个例子也有问题。生产中的演示和使用是不同的东西......

【参考方案3】：

这是我的解决方案。

CSS

.selectBoxborder-radius:4px;border:1px solid #AAAAAA;

HTML

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

【参考方案4】：

请检查解决方案：

现场演示：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>

【讨论】：

我会添加 width: initial 而不是 width: 140px;

下拉菜单不是半径。

【参考方案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;