Изменить стиль Select с помощью jQuery

Author Роман Чернышов    Category CSS, HTML, jQuery     Tags Комментариев 3 Дата 21 Мар

select1 Изменить стиль Select с помощью jQueryВ последнее время дизайнеры стали все чаще рисовать HTML формы в стилистике HTML 2.0, эта тенденция длится уже несколько лет и чем дальше тем более привычным становятся красивые поля ввода данных и select’ы с закругленными краями и тенями. Можно только порадоваться, ведь все замечательно и CSS3 уже используется где только можно, позволяя придавать красивый вид формам, полям и селектам. Увы не всегда все так радужно…

Не смотря на то, что все современные браузеры поддерживают HTML5 и CSS3, ими пользуются далеко не все, и как гласит статистика половина пользователей всего интернета по прежнему работают в браузерах старых версий, многие из которых не поддерживают в полной мере или вообще CSS3. По этому стилизовать выпадающий список (Select), часто приходится старыми добрыми средствами, а именно jQuery (js) и картинками PNG или GIF. Об одном из таких способов я хочу рассказать.
select2 Изменить стиль Select с помощью jQuery
Приведенный ниже скрипт был случайно найден мною на страницах рунета, к сожалению адреса я не запомнил и имени его автора. По этому просто передаю ему большой респект.

Код jQuery

(function($){
 $.fn.extend({
 
 	customStyle1 : function(options) {
	  if(!$.browser.msie || ($.browser.msie&&$.browser.version>6)){
	  return this.each(function() {
 
			var currentSelected = $(this).find(':selected');
			$(this).after('<span class="select1"><span class="customStyleSelectBoxInner">'+currentSelected.text()+'</span></span>').css({position:'absolute', opacity:0,fontSize:$(this).next().css('font-size')});
			var selectBoxSpan = $(this).next();
			var selectBoxWidth = parseInt($(this).width()) - parseInt(selectBoxSpan.css('padding-left')) -parseInt(selectBoxSpan.css('padding-right'));
			var selectBoxSpanInner = selectBoxSpan.find(':first-child');
			selectBoxSpan.css({display:'inline-block'});
			selectBoxSpanInner.css({width:selectBoxWidth, display:'inline-block'});
			var selectBoxHeight = parseInt(selectBoxSpan.height()) + parseInt(selectBoxSpan.css('padding-top')) + parseInt(selectBoxSpan.css('padding-bottom'));
			$(this).height(selectBoxHeight).change(function(){
				selectBoxSpanInner.text($('option:selected',this).text()).parent().addClass('changed');
			});
 
	  });
	  }
	}
 });
})(jQuery);

Вызов скрипта для стилизации «селекста».

$(document).ready(function() {
	$('.select1').customStyle1();
  });

HTML код «селекта» который будет стилизован

<select name="name" class="select1">
	<option value="">Опция 1</option>
	<option value="">Опция 2</option>
	<option value="">Опция 3</option>
	<option value="">Опция 4</option>
	<option value="">Опция 5</option>
	<option value="">Опция 6</option>
</select>

Стиль который будет применен к селекту

.select1  {
	width:410px;
	height:32px;
	color:#909090;
	font:12px Arial, Tahoma, Helvetica, Verdana;
	text-align:left;
	background:url(images/sel1.png) no-repeat; /*изображение для оформления селекта*/
	line-height:30px;
	white-space:nowrap; /* запрещаем перенос */
	padding:0 22px 0 12px; /* отступ справа с учетом стрелочки */
	border:0;
	zoom:1; /* для IE6 */
	margin:3px 0 5px 0;
}

Заменив фоновое изображение вы можете стилизовать select как вам угодно и работать данный пример будет в большинстве браузеров, даже в самых старых).

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

3 комментария to “Изменить стиль Select с помощью jQuery”

  • user 10.04.2012 в 10:40 пп

    Спасибо большое
    долго искал
    самое простое решение данной проблемы и нашел именно на вашем сайте
    не зря 2+ часа просидел
    спасибо!

  • User2 15.04.2012 в 1:39 пп

    Спасибо, долго искал. Даже думал скин рисовать к другим select’ам)

  • Виталий 26.05.2013 в 6:55 пп

    Спасибо большое. Пригодилось ваше решение. Помогло победить select в опере, она напрочь отказывалась поддаваться!

Оставить комментарий

О блоге и авторе

Добро пожаловать на блог веб-разработчика! На протяжении многих лет, начиная с 2009 года, я занимаюсь созданием специализированных сайтов, сервисов и крупных веб-порталов. Мною было создано несколько сотен сайтов, большинство из которых работают на ПО созданном под заказ, а также на готовом ПО которое я разрабатываю на протяжении всего периода моей деятельности. Это: CMS "Совместные покупки", CMS "osRealty", CMS "Спорт прогнозы" и многое другое.

На страницах моего блога вы найдете множество информации о программировании, о появлении новых разработок, сможете ознакомиться с товарами и услугами которые я предоставляю. А также сможете получить консультацию, заказать разработку сайта или приобрести готовое решение, для реализации собственного проекта.

Поиск по блогу
Категории
Архив
Новое на сайте
Блогеры пишут
  • Роман Чернышов: Для работы капчи на PHP 5.6, замените в файле class.captcha.php строку 264 $ifunc( $this -> i [...]
  • Роман Чернышов: Схема такая: 1) На сайте есть виртуальные кошельки (далее ВК) 2) При пополнении пользователем ВК, [...]
  • Александр: Может скрипт комментариев блокирует сообщения с кодом? Или как длинный текст не проходит?
  • Александр: Пытаюсь в который раз здесь показать код, но страница обновляется, и не сообщения, ни любого оповеще [...]
  • Роман Чернышов: Лично у меня интерес к продаже ссылок пропал уже давно. Преимущество сапы, это то - что ссылки можно [...]
Портфолио Все работы

www.detskiy-mir.net
www.detskydoctor.ru
www.betelit.ru
www.all-alliance.ru
www.videogonok.ru
www.carpfishing.by
www.property-greek.com
www.domcons.ru

с 2009 года по сегодняшний день, создано более 300 сайтов...