样式SELECT元素下拉箭头

时间:2014-11-21 23:31:28

标签: javascript html css drop-down-menu html-select

我尝试将CS​​S样式和自定义向下箭头添加到select元素。当我点击下拉箭头(as noted on SO before)时,我无法通过JavaScript显示IE / Firefox显示下拉列表这一事实。

Square似乎找到了一种方法来设置select元素的下拉箭头,而不会干扰浏览器的默认行为......但我无法弄清楚他们是如何做到的。

现场直播:https://squareup.com/market/jriegerco/football-season-kc-whiskey-red

我看到他们正在使用:before:after - 但是如何让点击通过下拉图片直到下面的select元素?这个诡计是什么?!

Square styled SELECT

CSS:

.dropdown-wrapper i{
    background: #FFF;
    background: linear-gradient(#FFF, #FAFAFA);
    border-left-color: rgba(45, 60, 72, 0.12);
    border-radius: 0 3px 3px 0;
    height: 40px;
    line-height: 39px;
    pointer-events: none;
    position: absolute;
    right: 1px;
    top: 1px;
    width: 43px;    
}

.dropdown-wrapper i:before  {
    background: rgba(252, 252, 252, 0);        
    background: linear-gradient(to right, rgba(252, 252, 252, 0), #FCFCFC 20px);        
    content: "";
    height: 40px;
    position: absolute;
    left: -31px;
    top: 0;
    width: 30px;
}

.dropdown-wrapper i:after, .button-dropdown i:after {
    content: "";
    margin-top: -3px;
    pointer-events: none;
    position: absolute;
    right: 15px;
    top: 50%;
}

HTML:

<div class="dropdown-wrapper">
    <select class="dropdown button">
        <option>Select an option...</option>                
    </select>
    <i></i>
</div>

1 个答案:

答案 0 :(得分:3)

  

如何允许点击通过下拉图片直到下面的select元素?

CSS中的

pointer-events: none;允许点击通过图片。