html - 无法将 ul Dropdown 转换为 Select DropDown

Question

我有一个带有使用 ul 和 li ( jsfiddle ) 的下拉列表的 jsfiddle。尝试将其转换为选择选项下拉列表时，我没有得到相同的选项 ([jsfiddle]) 2 .我猜这与我重命名某个 CSS 的方式有关(我只是用选项替换了 li)，但我不确定它有什么问题。我当前的 HTML 和 CSS 在下面，两个 jsfiddles 在上面的文本中。

HTML

<div class="dd wrapper-dropdown-3" tabindex="1">
    <select id="Process" class="dropdown" name="Process" data-val-required="Required" dataval="true">
        <option value="">--- Select One ---</option>
        <option value="Extrusion"><a href="#">Extrusion</a></option>
        <option value="Injection"><a href="#">Injection</a></option>
        <option value="Secondary"><a href="#">Secondary</a></option>
        <option value="Vinyl Dip Molding"><a href="#">Vinyl Dip Molding</a></option>
    </select>
</div>

CSS

.wrapper-dropdown-3 {
    /* Size and position */
    position: relative;
    width: 200px;
    margin: 0 auto;
    padding: 10px;
    /* Styles */
    background: #fff;
    border-radius: 7px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 1px rgba(50, 50, 50, 0.1);
    cursor: pointer;
    outline: none;
    /* Font settings */
    font-weight: bold;
    color: #0000FF;
}
.wrapper-dropdown-3:after {
    content:"";
    width: 0;
    height: 0;
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #8aa8bd transparent;
}
.wrapper-dropdown-3 .dropdown {
    /* Size & position */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    /* Styles */
    background: white;
    border-radius: inherit;
    border: 1px solid rgba(0, 0, 0, 0.17);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    font-weight: normal;
    list-style: none;
    /* Hiding */
    opacity: 0;
    pointer-events: none;
    /*Gets rid of the padding where the bullets would be*/
    padding-left:0;
}
.wrapper-dropdown-3 .dropdown option a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #0000FF;
    border-bottom: 1px solid #e6e8ea;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);
    transition: all 0.3s ease-out;
}
.wrapper-dropdown-3 .dropdown option i {
    float: right;
    color: inherit;
}
.wrapper-dropdown-3 .dropdown option:first-of-type a {
    border-radius: 7px 7px 0 0;
}
.wrapper-dropdown-3 .dropdown option:last-of-type a {
    border-radius: 0 0 7px 7px;
    border: none;
}
/* Hover state */
 .wrapper-dropdown-3 .dropdown option:hover a {
    background: #f3f8f8;
}
.wrapper-dropdown-3 .dropdown:after {
    content:"";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 15px;
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: #fff transparent;
}
.wrapper-dropdown-3 .dropdown:before {
    content:"";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 13px;
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.1) transparent;
}
.wrapper-dropdown-3.active .dropdown {
    opacity: 1;
    pointer-events: auto;
}

Answer 1

您需要做几件事来解决您的问题。所有这些都在您的 .wrapper-dropdown-3 .dropdown 样式中。首先，如@ramesh 所述，删除 pointer-events: none 。然后将 top: 100%; 更改为 top: 0;。添加 宽度:100%;。将 opacity: 0; 更改为 opacity: 1; 以便您可以看到它。删除您的边框，选择已经有边框。最后，添加以下内容以从 Firefox 中删除默认下拉箭头:

-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';

Here是一个更新的 JSFiddle。