SiteIS

jQuery - безграничные возможности в дизайне Вашего сайта!

- Один из самых популярных на сегодня среди веб разработчиков фреймворк

- Позволяет быстро и легко создать потрясающие веб-приложения

- Удивительно красивые анимационные эффекты

- Улучшение пользовательского интерфейса

Стилизация select - проще простого

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

Скачать готовый код Посмотреть Demo

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/

Автор: Super User