Настроенная стрелка вниз для выбора

Я использую следующий код для настройки стрелки раскрывающегося списка select:

HTML

<span class="selectWrapper">
    <select id="rowselect" class="pageinfoselect input-mini">
        <option>...</option>
    </select>
</span>

CSS

span.selectWrapper {
    position: relative;
    display: inline-block;
          width:65px;
}

span.selectWrapper select {
    display: inline-block;
    padding: 4px 3px 3px 5px;
    margin: 0;
    font: inherit;
    outline:none; /* remove focus ring from Webkit */
    line-height: 1.2;
    background: #f5f5f5;
    height:30px;
    color:#666666;
    border:1px solid #dddddd;
}




/* Select arrow styling */
span.selectWrapper:after {
    content: url("../images/arrow_down.png");
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    line-height: 30px;
    padding: 0 7px;
    background: #f5f5f5;
    color: white;
    border:1px solid #dddddd;
    border-left:0px;
}

Это отлично работает и заменяет стрелку раскрывающегося списка по умолчанию, но проблема заключается в том, что изображение стрелки не доступно для кликов. Если я нажму на поле выбора, он откроется, но я хочу, чтобы он открывался, когда я нажимаю на изображение стрелки, а также

Ответы

Ответ 1

Добавьте следующее правило

pointer-events:none;

РЕДАКТИРОВАТЬ:

Однако следует отметить, что IE пока не поддерживает это свойство (хотя согласно caniuse - оно будет поддерживаться в IE11)

НО, если вы все еще хотите использовать этот метод, вы можете использовать Modernizer или условные комментарии (для IE <10) и этот хак css (для IE10), чтобы заставить IE вернуться к стандартной встроенной стрелке.

/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width:0\0) { 
    span.selectWrapper:after
    {
        display:none;
    }
}

Однако для этого есть обходной путь (и также другое решение), о котором я упоминаю в своем ответе здесь - который также содержит этот Codepen