Как заменить кнопку со стрелкой на элементе <select>на css?

Question

Попытка стилизовать элемент выбора в форме с изображением для стрелки раскрывающегося списка.Пока не знаю, возможно ли это.

Answer 1

Добавьте этот стиль к вашему

.styled-select {
   background: url(new_arrow.png) no-repeat right #fff;
}

Источник: http://bavotasan.com/2011/style-select-box-using-only-css/

Answer 2

Создайте стиль с помощью CSS и используйте события указателя:

<label>
<select>
   <option value="0">Zero</option>
   <option value="1">One</option>
</select>
</label>

и относительный CSS равен

label:after {
    content:'\25BC';
    display:inline-block;
    color:#000;
    background-color:#fff;
    margin-left:-17px;   /* remove the damn :after space */
    pointer-events:none; /* let the click pass trough */
}

используйте блок с фоновым изображением, если хотите, я просто использую стрелку вниз здесь. Вот пример уродливой скрипки: https://jsfiddle.net/1rofzz89/