И снова обходимся без JS.
В данном хаке не будем удалять стрелку, которая выводится по умолчанию браузером. Просто её скроем, наложив сверху псевдоэлемент :after с фоном с изображением нашей стрелки.
В помощь веб-разработчику!
Еще один вариант кастомизации элемента форм select
Кастомный select без использования javascript
Чтобы задать цвет, фоновое изображение, размеры для элемента форм <select> существует масса мануалов основанных на использовании JS, а то и библиотек скриптов типа JQuery. Что очень усложняет последующую их кастомизацию и внедрение в сайт в соответствии с заданным дизайном.
Предлагаемый вариант позволяет легко и быстро задать фон, бордер, размер, а главное, вид стрелки для выпадающего списка <select>. Только CSS!
Как задать цвет и другие стили для нумерованного списка
По умолчанию цвет маркеров для списков в HTML есть таким как и сам текст. Допустим, нам нужно сделать цвет текста в списке <ol> черным, а сами цифры фиолетовыми... Конечно можно было бы усложнить код, завернув содержимое <li> в тэг <span>...
Сервис по подбору шрифтовых иконок: Octicons, Font Avesome, Glyphicons, Material, Ionicons, IcoMoon, Foundation
Сайт GlyphSearch
Вниманию web дизайнеров, верстальщиков. Предлагаю вашему вниманию удобный ресурс по поиску шрифтов с иконками.
CSS селекторы, псевдоэлементы и псевдоклассы, полный список. 30+
Эти CSS псевдоклассы и псевдоэлементы теперь совместимы со всеми распространенными браузерами. Пользуйтесь на здоровье! Много полезного, того, что вы еще не знали.