Помогите стилизировать селект

[beliy]

есть селект вида:

 

Как его оптимальнее всего стилизировать? Реально ли сделать на чистом css? Насколько предложенные способы получатся кроссбраузерными?

Заранее огромное спасибо за оказанную помощь...

Edited November 3, 2015 by beliy

[hypnocolor]

Такое ощущение, что код откуда-то скопипастили и правки внесли бездумно. http://codepen.io/anon/pen/zvLaqq— так больше похоже?

[hypnocolor]

Минутка гугла: http://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript

[beliy]

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

Благодарю за понимание...

[hypnocolor]

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

Благодарю за понимание...

 

А чего тут «профессионального»? По ссылке есть ответ с кучей примеров, вся основа сводится к тому, что нужно сбросить стили через appearance: none. А дальше уже стилизуйте, как хотите. В вашем случае всего-то нужно настроить размеры селекта, текста и круглые края через border-radius. Стрелку можно задать либо простым бэкграундом, либо псевдоэлементом.

[horprogs]

Использовал:

http://kate-land.net/html-css/item/336-cross-browser-styling-of-select-on-pure-css

[beliy]

максимум что у меня получилось - http://codepen.io/anon/pen/EVpLqP

что не очень похоже на то что на дизайне(((

[beliy]

так больше похоже?

Спасибо, да. А не подскажете как сделать чтоб длинные значения не наезжали на стрелку?