Стилизация select

В ТЗ сказано: “Нестандартные элементы должны быть стилизованы без JS. В select стилизуется также стрелочка”. Подскажите, каким образом это может быть достигнуто? Что я ни делаю, стрелочка упорно жмётся к правому краю и не желает от него отодвигаться, хотя должна быть левее (на картинке - как должно быть):
И ещё, в созданном мной select при наведении на него оно меняет цвета шрифта и фона и стрелочки и выпадает меню. Как сделать так, чтобы если перевести мышь за пределы селекта с уже выпавшим меню, он сохранял параметры цвета, как при наведении? Если мышь убираю, выпавшее меню остаётся, однако цвет меняется на изначальный.
Вот ссылка на песочницу: https://thimbleprojects.org/alessio18911/283457

по поводу стрелочки можно почитать здесь http://kate-land.net/html-css/item/336-cross-browser-styling-of-select-on-pure-css

если коротко то отменяется стандартное отображение селекта, и через background задается свое изображение стрелочки, а уж background мы можем двигать как угодно

1 лайк

О! Всё получилось!! Пол-задачи решено. Осталось только узнать, как сохранить белый цвет селекта и выпавшего меню в случае ухода мыши за их пределы. ) Спасибо!
Обновляю ссылку для решения этого вопроса: https://thimbleprojects.org/alessio18911/283551
UPD: внезапно вспомнил про :focus и этот второй вопрос тоже решил! Так что весь данный вопрос по селекту исчерпан. Всем спасибо!!:slight_smile: