Question

好的，所以情况如下：

我有一个样式<select>元素
在其（透明）背景的右侧，我想显示一些向上箭头（最好是一个Bootstrap Glyphicon）

问题：

图标显示正常（在小提琴中，它显示为方形图标，出于某种原因，但无关紧要）
但是，当点击图标时，不会触发选择 - 这是不正确的。

有什么想法吗？

HTML：

<div id="styled-select">
    <select>
        <option value="one">One</option>
        <option value="two">Two</option>
        <option value="three">Three</option>
    </select>
</div>

CSS：

select {
    border:0; 
    border-radius: 0;
    background:transparent; 
    outline:none; 
    box-shadow:none; 
    -webkit-box-shadow:none; 
    text-align:right;
    -webkit-appearance: none;

    padding-top: 1px;
    font-size: 13px;
    padding-left: 10px;
}

#styled-select:hover {
    color: #666;
}

#styled-select:after {
    content:"\e113";
    font-family:"Glyphicons Halflings";
    line-height:1;
    display:inline-block;
    margin-left:5px;
}

演示/小提琴： http://jsfiddle.net/tnzbL1hp/

Answer 1

补充说：

select {
    margin-right:-30px;
    padding-right:25px;
}

和

#styled-select:after {
    position:relative;
    z-index:-1;
}

http://jsfiddle.net/tnzbL1hp/1/

Answer 2

我想出的另一个解决方案：

    #styled-select:after {
        content:"\e113";
        font-family:"Glyphicons Halflings";
        line-height:1;
        display:inline-block;

        pointer-events:none;

        width: 23px;
        height: 23px;
        position: absolute;
        top: 8px;
        right: 4px;

    }

并向padding-right元素添加一些<select> ...

样式选择元素

2 个答案: