Кастомные выпадающие списки (select box) в Chrome и Opera

Question

[elisium]

Моя задача — сделать кастомные селекты для сайта. Решение должно быть максимаьно универсальным, так как движек довольно громоздкий (moodle), и проверить работоспособность решения на всех возможных страницах проекта просто нереально. Большинство готовых решений сильно меняют изначальную верстку элемента и в большинстве своем подходят только для одного селекта на странице, а в moodle их может быть до 5.
Сходу написал такой вариант:

//jquery
$("select").wrap('<span class="sel_wrap"></span>').wrap('<span class="sel_wrap_inner"></span>');

/*Стили*/
.sel_wrap {
    background: url(images/bg_buttonwrap.png) left top no-repeat;
    height: 24px;
    display: inline-block;
    overflow: hidden;
}
.sel_wrap_inner {
    background: url(images/bg_button_drop.png) right top no-repeat;
    display: inline-block;
    height: 24px;
    overflow: hidden;
}
select {
    background: none;
    border: none;
    margin: 3px -24px 0 5px;
}

В итоге вышло вот что:

Мне даже понравилось, правда сам выпадающий список налезает частично на фон, но это не существенно в данном случае. Но такое отображение было только в fierfox и ie. В хроме и опере показывает так:

Вот этот белый фон убрать не могу никак. Есть идеи?

Answer 1

[max_rip]

я делал так, рисовал спан, под селектом. А сам селект скрывал через opacity. При изменение селекта, в спан писалось выбранное значение.

Comments

[elisium]

Спасибо, это работает, осталась возня по приведению к нормальному виду.

Answer 2

[chikuyonok]

select { -webkit-appearance:none; } для Хрома

Answer 3

[homm]

«background-color: transparent» не пробовали?

Comments

[elisium]

Пробовал, пробовал так же для option (исходя из некой логики).

[homm]

Мне нравится ход ваших мыслей :) Жаль, что не помогло.

[whynot]

1px*1px прозрачный gif :D

[elisium]

Любой фон рисуется в хроме под белой подложкой, выглядит как рамка (если цветной), в том числе и картинки.

Answer 4

[Riateche]

Есть jQuery-плагин cuSel. Он хорош, если не нужно вешать события на onchange и динамически изменять их. А лучше напишите свой безглючный плагин (а если у вас нет jQuery, то напишите без него), сообщество будет вам благодарно.

Comments

[elisium]

В moodle как раз на всех практически селектах висит onchange, поэтому я и писал, что решение должно быть максимально универсальным. Самое лучшее решение (без jquery), кстати, я нашел на этом сайте, но мне не подошло.

Answer 5

[porcelanosa]

т.е. такое в хроме и опера работать не будет?

<select id="selectbox" class='ui-state-error' style="-webkit-appearance: none">
    <option style="background:url(http://artworks.arkanar.ru/upload/icons/facebook_32.png) repeat-x 0 0;">123</option>
    <option>456</option>
    <option>789</option>
</select>