Question

我尝试切换基本的选择下拉列表，但是切换是独立的/与选项有一点差距。像这样：

这是一个JSFIDDLE和我的表单代码：

<form method="post">
<label for="month">Choose Month
    <br>
        <span class="custom-dropdown custom-dropdown--silver">
            <select id="month" class="custom-dropdown__select custom-dropdown__select--silver">
                <option>JAN</option>
                <option>FEB</option>
                <option>MAR</option>
                <option>APR</option>
                <option>MAY</option>
                <option>JUN</option>
                <option>JUL</option>
                <option>AUG</option>
                <option>SEP</option>
                <option>OCT</option>
                <option>NOV</option>
                <option>DEC</option>
            </select>
        </span>
        </label>
    </form>

我不确定在箭头移动到select元素的clickbable区域之外后如何继续切换选项。请帮忙。

Answer 1

所以这是一个解决方法，但是如果你将一个div包装在一个div中并对其应用一个click事件，你可以使它看起来像是已经点击了箭头。而且你还需要停止冒泡的实际选择点击。

http://jsfiddle.net/bzh2g6o7/7/

JS：

document.getElementById('month').addEventListener('click',
    function (event) {
        event.stopPropagation();
    }
);

document.getElementById('divWrap').addEventListener('click',
    function (event) {
        event.stopPropagation();
        var dropdown = document.getElementById('month');
        var newEvent = document.createEvent('MouseEvents');
        newEvent.initMouseEvent('mousedown', true, true, window);
        dropdown.dispatchEvent(newEvent);
    }
);

HTML：

<form method="post">
<label for="month">Choose Month
    <br>
        <div id="divWrap">
        <span class="custom-dropdown custom-dropdown--silver">
            <select id="month" class="custom-dropdown__select custom-dropdown__select--silver">
            <option>JAN</option>
            <option>FEB</option>
            <option>MAR</option>
            <option>APR</option>
            <option>MAY</option>
            <option>JUN</option>
            <option>JUL</option>
            <option>AUG</option>
            <option>SEP</option>
            <option>OCT</option>
            <option>NOV</option>
            <option>DEC</option>
        </select>
        </span>
    </div>
    </label>
</form>

CSS（最后在小提琴中添加了一种风格）：

#divWrap {
    display: inline-block;
    width: 8em;
}

Answer 2

你觉得假装怎么样？您可以使<select>元素的背景透明，并在其后面放置一个按钮。我的示例解决方案看起来并不像你的小提琴那么漂亮，但它可以作为演示。

.custom-dropdown {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    background: silver;
}

/* Button */
.custom-dropdown::before {
    display: block;
    content: "\25BC";
    position: absolute;
    top: 0px;
    right: 0px;
    width: 30px; /* Same as padding on select */
    height: 100%;
    background: gray;
    z-index: 1; /* Position behind */
    text-align: center;
}

.custom-dropdown__select {
    position: relative;
    z-index: 2; /* Position in front */
    width: 95px;
    border: 0px;
    border-radius: 3px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 20px;
    padding-right: 30px; /* Button width */
    background: none;
}

<form method="post">
    <label for="month">
        Choose Month<br/>
        <span class="custom-dropdown custom-dropdown--silver">
            <select id="month" class="custom-dropdown__select custom-dropdown__select--silver">
                <option>JAN</option>
                <option>FEB</option>
                <option>MAR</option>
                <option>APR</option>
                <option>MAY</option>
                <option>JUN</option>
                <option>JUL</option>
                <option>AUG</option>
                <option>SEP</option>
                <option>OCT</option>
                <option>NOV</option>
                <option>DEC</option>
            </select>
        </span>
    </label>
</form>

带有单独选择菜单切换的HTML下拉列表

2 个答案: