My<cod/>.net
Кастомные выпадающие списки (select box) в Chrome и Opera
Просмотров: 355
Ответов: 5
Моя задача — сделать кастомные селекты для сайта. Решение должно быть максимаьно универсальным, так как движек довольно громоздкий (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. В хроме и опере показывает так:
Вот этот белый фон убрать не могу никак. Есть идеи?
//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;
}