圆角<选择>下拉菜单

Rounded corner <select> drop down

本文关键字：下拉菜单 选择 圆角      更新时间：2023-09-26

我正在尝试曲线选择下拉框选项。

到目前为止，通过将某些样式应用于选择标签，我已经在下拉框本身（带有选项的下拉框）中实现了样式效果，但我想在选项中给出border-radius。

这是我到目前为止使用的css，您可以在这里建议使用JS的任何建议：

.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;
}
<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>

您对本机select控件的下拉列表样式的控制很少，当然也不能向其添加圆角边框。

为了实现您的需求，您必须使用第三方下拉插件，该插件将select及其option元素替换为纯 HTML，例如 Select2。

您将无法仅使用 css 设置选项框的样式。您可以管理的唯一方法是使用div 创建您自己的虚假选择输入并根据需要设置它们的样式。

没有

跨浏览器的CSS属性来设置<option>标签的样式，如果你想使选项角变圆，你应该使用SelectBoxIt jQuery插件。

http://gregfranko.com/jquery.selectBoxIt.js/

相关文章：