Как стилизировать select согласно макету?

Question

[uRoot]

Здравствуйте. Необходимо заверстать макет, но у меня не получается стилизировать тег select, так как для него не предусмотрена стилизация.
Что нужно заверстать:

spoiler

PSD макет целиком в Adobe Assets:
https://adobe.ly/2MHrFn1

Стрелка выглядит так - <>, ее CSS:

font-family: Quicksand;
color: #959595;
font-size: 11px; /* Approximation due to font substitution */
font-weight: 700;
line-height: 71px; /* Approximation due to font substitution */
text-align: left;
transform: scaleY(1.0635) rotate(90deg); /* width and height properties ommitted due to transform */
text-shadow: 0px 1px 0px #ffffff;

Подскажите как это сделать

Answer 1

[Дмитрий]

Иконки добавьте свои
option плохо поддается стилизации
Пример

Answer 2

[Denis]

немного похоже
https://tympanus.net/Development/SimpleDropDownEff...

Comments

[uRoot]

Да, немного похоже. Только я бы хотел сделать это на нативном CSS. У меня просто все намного проще, чем в примере указанном вами

Answer 3

[Дмитрий]

Попробуйте select2 и темку для него запилить

Comments

[uRoot]

Та я-то и верстаю нативно. Ее можно стилизовать на чистом CSS, просто что-то я уже запарился.

[Антон Спирин]

Denny Schwarz, если в опциях надо показывать иконки, то нельзя.

[uRoot]

Антон Спирин, не, в опциях не нужно

[Антон Спирин]

Denny Schwarz, ну тогда вообще проблемы не вижу.

[uRoot]

Антон Спирин, только у меня не выходит это почему-то сделать

[Антон Спирин]

Denny Schwarz, с чем именно проблемы? Посмотрите решения на codepen и сделайте похожее. Псевдо элементы :before и :after вам в помощь.