javascript - 在伪元素上触发选择下拉菜单

Question

点击 :after (箭头)时有没有办法触发下拉列表(选择选项)？也许我的代码更适合这个设计，但这是我最终想出的唯一可行的解​​决方案。

HTML

<label>
    <select>
        <option selected>jkjhhkl</option>
        <option>asdfasd</option>
        <option>dfgdfgfd</option>
    </select>
</label>

CSS

select {
    height: 40px;
    background-color: #666;
    color: #f6f6f6;
    font: 400 13px "Open Sans",Arial,"Helvetica Neue",Helvetica,sans-serif;
    padding: 6px 20px;
    overflow: hidden;
    border: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

label {
    position: relative;
    height: 40px;
}

label:after {
    content: '\f107';
    font: 22px "FontAwesome";
    color: #f6f6f6;
    background-color: #333;
    padding: 10px 10px;
}

https://jsfiddle.net/sworj0ta/1/

Answer 1

我想这就是您要找的:https://jsfiddle.net/2232xzy8/1/

我将选择框放在 label 和 label:before 上方，并将背景颜色仅移动到 label 元素，同时保持 选择的背景透明。

因此看起来您点击的是箭头，但实际上您点击的是选择框。