Изменить стиль Select с помощью jQuery
Автор: Роман Чернышов
В последнее время дизайнеры стали все чаще рисовать HTML формы в стилистике HTML 2.0, эта тенденция длится уже несколько лет и чем дальше тем более привычным становятся красивые поля ввода данных и select’ы с закругленными краями и тенями. Можно только порадоваться, ведь все замечательно и CSS3 уже используется где только можно, позволяя придавать красивый вид формам, полям и селектам. Увы не всегда все так радужно…
Не смотря на то, что все современные браузеры поддерживают HTML5 и CSS3, ими пользуются далеко не все, и как гласит статистика половина пользователей всего интернета по прежнему работают в браузерах старых версий, многие из которых не поддерживают в полной мере или вообще CSS3. По этому стилизовать выпадающий список (Select), часто приходится старыми добрыми средствами, а именно jQuery (js) и картинками PNG или GIF. Об одном из таких способов я хочу рассказать.
Приведенный ниже скрипт был случайно найден мною на страницах рунета, к сожалению адреса я не запомнил и имени его автора. По этому просто передаю ему большой респект.
Код 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 как вам угодно и работать данный пример будет в большинстве браузеров, даже в самых старых).
Часто наталкиваюсь на крупные сайты где используется похожий принцип стилизации объектов форм, из чего можно сделать вывод, что пока еще большинство веб-мастеров склонны к применению таких не очень простых решений, ради поддержки пользователей со старыми браузерами.
Спасибо большое
долго искал
самое простое решение данной проблемы и нашел именно на вашем сайте
не зря 2+ часа просидел
спасибо!
Спасибо, долго искал. Даже думал скин рисовать к другим select’ам)
Спасибо большое. Пригодилось ваше решение. Помогло победить select в опере, она напрочь отказывалась поддаваться!