Как сверстать такой поиск и выпадающий список [картинка]?

Question

[GreenMan1899]

Поиск:
1) не знаю как засунуть картинку в placeholder.
2) есть какой-то более изящный способ сделать правый серый бордер высотой и на уровне текста, кроме как background-image?

Выпадающий список:
1) как вообще сделать такую кнопку (стрелки вверх-вниз)? select не кастомизируется насколько я знаю.
2) ну и такой же вопрос, как потом засунуть туда те серые боковые перегородки

Answer 1

[Роман Савицкий]

1) select кастомизируется;
2) select - этот с кнопками, можете через <ul><li></li></ul> в <div></div>
3)В этом же <div></div> еще один див <div><span>Вверх</span><span>Вниз</span></div>
4)Вверх - Вниз - это ваши стрелочки, через png, svg или fontawesome
5)Слева и справа задать border вашему див <div><span>Вверх</span><span>Вниз</span></div>
Например www.webmasters.by/images/articles/webprogramm/cust...

Answer 2

[Сергей]

1. никак... бэкграундом, псевдами before after (в сам placeholder никак) скрытие через JS
2. :after {content:'|'} или content:'' но с высотой и бордером

3. бэкграндом + appearence:none;-webkit-appearence:none;

Answer 3

[Albert Kazan]

Нужно создавать псевдо select. Select и option не полностью кастомизируется.