В данном случае используется оригинальный 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/