В данном случае используется оригинальный select и дополнительный блок, в который подставляется значение выбранной опции. Соответственно, все функции, присущие select-у сохраняются.
html разметка простая до безобразия.
<div class="select_main"> <p></p> <select name="version_pledge" id="calc_region_1"> <option value="">Выберите вариант залога</option> <option value="1">Залог автомобиля</option> <option value="2">Залог недвижимости</option> <option value="3">Залог бизнеса</option> </select> </div>
В общий блок оборачиваем пустой элемент (в данном варианте это p) и сам select.
css оформление:
.select_main{ margin:0 auto 10px; width:430px; position:relative; border-top:1px solid #999a9a; border-bottom:1px solid #fff; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; background:#b0b3b6 url(../img/select_arrow.png) no-repeat right; } select { width:100%; height:34px; position:reative; border:none; cursor:pointer; opacity:0; filter: alpha(opacity=0); } .select_main p { width:100%; height:100%; position:absolute; left:0; top:0; color:#0a0a0a; font-size:14px; line-height:34px; overflow:hidden; }
Обертывающий блок стилизуем так, как должен выглядеть select по дизайну. Сам select скрываем с помощью opacity, а пустой блок перед select позиционируем абсолютно и задаем ему размеры родительского div-а.
Ну и небольшой скрипт, что бы это все заработало.
$('select').each(function(){ $(this).siblings('p').text( $(this).children('option:selected').text() ); }); $('select').change(function(){ $(this).siblings('p').text( $(this).children('option:selected').text() ); });
Выбираем все select на странице и клонируем текст из option, установленный по умолчанию в пустой блок. При смене option делаем тоже самое.
Недостатком данного метода является то, что option стилизовать в соответствии с дизайном, увы, не получится.
Вот так все легко и просто. Метод прекрасно отрабатывает в IE 7-10, FF, Chrome и Safary. Надеюсь, что кому то этот способ поможет решить поставленные задачи и сэкономит время.
Отдельное спасибо автору идеи Ильдару Сарибжанову - сайт источник http://sawtech.ru/tehno-blog/stilizatsiya-select/