CSS оформление select
Доброй ночи, уважаемые посетители моего блога!
Сейчас начало первого ночи, 8 апреля. Сегодня у моей меньшей дочки день рождение — ей стукнуло 9 месяцев. Поздравляю ее с таким знаменательным днем и хочу пожелать самого главного в жизни — здоровья, а также ее родителя (то есть мне и моей жене) терпения.
С утра был отличнейший денек — солнышко, ветерка вообще не было и я прогулял в парке целых 3 часа с дочкой. Ей сегодня понравилось гулять, так как все эти 3 часа проспала (соня!) на свежем воздухе. А сейчас опять за окном дождь, настроения практически нет, но я себя заставлю написать этот пост))).
Как-то дорабатывал я знакомому сайт — магазин. И там надо было стилизовать выпадающий список, который делается не чем иным как тегом select. Так вот: порыв немного интернет я нашел что искал и сегодня я хочу поделиться тем что нашел.
В интернете есть наверное целая куча хаков и плагинов, которые дают возможность изменить стандартный select на не стандартный и необычный или которые отображают его во всех браузерах одинаково. Короче — сейчас будем делать из обычного select`а наш не обычный и будет это выглядеть примерно-приблизительно так:
Возьмем обычный select с несколькими option примерно вот:
<select id="ourselect1">
<option value="eee">Значение 19</option>
<option value="222">Значение 18</option>
<option value="444">Значение 17</option>
<option value="123">Значение 16</option>
<option value="122">Значение 15</option>
<option value="113">Значение 14</option>
<option value="124">Значение 13</option>
</select>Обернем его в div с классом “sel_wrap”, в начале которого выстроим структуру нашего селекта дивами. Если представить это все дело на картинке то получится следующая картина:
А код получится следующим:
<div class="sel_wrap">
<div class="sel_imul">
<div class="sel_selected">
<div class="selected-text">Значение 19</div><div class="sel_arraw"></div>
</div>
<div class="sel_options">
<div class="sel_option" value="eee">Значение 19</div>
<div class="sel_option" value="222">Значение 18</div>
<div class="sel_option" value="444">Значение 17</div>
<div class="sel_option" value="123">Значение 16</div>
<div class="sel_option" value="122">Значение 15</div>
<div class="sel_option" value="113">Значение 14</div>
<div class="sel_option" value="124">Значение 13</div>
</div>
</div>
<select id="ourselect1">
<option value="eee">Значение 19</option>
<option value="222">Значение 18</option>
<option value="444">Значение 17</option>
<option value="123">Значение 16</option>
<option value="122">Значение 15</option>
<option value="113">Значение 14</option>
<option value="124">Значение 13</option>
</select>
</div>Далее приступим к стилям. Естественно скрываем наш обычный селект, а структуру эмилирующую селект стилизуем как нам хочется:
.sel_wrap{
background:#efefef;
margin-bottom:5px;
padding:7px;
}
.sel_wrap select{
display:none;
}
.sel_imul{
width:300px;
}
.sel_imul .sel_selected{
background:#fff;
border:1px solid #bbb;
padding:3px 6px;
font-size:14px;
font-family:Times;
cursor:pointer;
position:relative;
}
.sel_imul.act .sel_selected{
background:#efefef;
}
.sel_selected .sel_arraw{
height:100%;
width:20px;
background:url('http://bit.ly/gudLNa') 50% 50% no-repeat;
position:absolute;
top:0px;
right:0px;
}
.sel_imul:hover .sel_selected .sel_arraw{
background-color:#e0e0e0;
border-left:1px solid #bbb;
}
.sel_imul.act .sel_selected .sel_arraw{
background-color:#e0e0e0;
border-left:1px solid #bbb;
}
.sel_imul .sel_options{
background:#fff;
border:1px solid #dbdbdb;
border-top:none;
overflow:auto;
position:absolute;
width:298px;
display:none;
z-index:10;
}
.sel_options .sel_option{
padding:3px 4px;
font-size:14px;
font-family:Times;
border:1px solid #fff;
border-right:none;
border-left:none;
}
.sel_options .sel_option:hover{
border-color:#dbdbdb;
cursor:pointer;
}
.sel_options .sel_option.sel_ed{
background:#dbdbdb;
border-color:#dbdbdb;
}
/*second variant*/
.sec .sel_imul{
width:200px;
}
.sec .sel_imul .sel_selected{
border:1px solid #C0CAD5;
}
.sel_imul.act .sel_selected{
background:#fff;
}
.sec .sel_imul:hover .sel_selected .sel_arraw{
background-color:#e1e8ed;
border-left:1px solid #d2dbe0;
}
.sec .sel_imul.act .sel_selected .sel_arraw{
background-color:#e1e8ed;
border-left:1px solid #d2dbe0;
}
.sec .sel_imul .sel_options{
background:#fff;
border:1px solid #d2dbe0;
width:198px;
}
.sec.overf .sel_imul .sel_options{
height:100px;
}
.sec .sel_options .sel_option:hover, .sec .sel_options .sel_option.sel_ed{
background:#587da1;
border:1px solid #2a5883;
color:#fff;
cursor:pointer;
}
.sec .sel_imul .sel_selected .sel_arraw{
background-image:url('http://vkontakte.ru/images/darr_dd_out.gif');
}
.sec.round .sel_imul .sel_selected{
-webkit-border-radius:5px;
}
.sec.round .sel_imul .sel_selected .sel_arraw{
-webkit-border-radius:0 5px 5px 0;
}
.sec.round .sel_imul .sel_options{
-webkit-border-radius:0 0 5px 5px;
}
/*green*/
.sec.green .sel_imul .sel_selected{
border-color:#FFAD99;
}
.sec.green .sel_imul:hover .sel_selected .sel_arraw,
.sec.green .sel_imul.act .sel_selected .sel_arraw{
background-color:#FFD6CC;
border-left:1px solid #FFAD99;
}
.sec.green .sel_options .sel_option:hover,
.sec.green .sel_options .sel_option.sel_ed{
background:#FF9980;
border:1px solid #FF704D;
color:#fff;
cursor:pointer;
}Здесь уже стили предусматривающие работу javascript’а, и несколько типов селектов.
Обязательно подключите jQuery, хотя бы так:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Дальше приступим к javascript‘у. Во первых сделаем так чтобы при клике на див эмулирующий select, открывался или закрывался список option’ов:
jQuery(document).ready(function(){
$('.sel_imul').on('click', function() {
$('.sel_imul').removeClass('act');
$(this).addClass('act');
if ($(this).children('.sel_options').is(':visible')) {
$('.sel_options').hide();
}
else {
$('.sel_options').hide();
$(this).children('.sel_options').show();
}
});Теперь пишем событие которое будт менять значение обычного, скрытого, селекта и значение у эмулирующего селекта:
$('.sel_option').on('click', function() {
//меняем значение на выбранное
var tektext = $(this).html();
$(this).parent('.sel_options').parent('.sel_imul').children('.sel_selected').children('.selected-text').html(tektext);
//активируем текущий
$(this).parent('.sel_options').children('.sel_option').removeClass('sel_ed');
$(this).addClass('sel_ed');
//устанавливаем значение для селекта
var tekval = $(this).attr('value');
tekval = typeof(tekval) != 'undefined' ? tekval : tektext;
$(this).parent('.sel_options').parent('.sel_imul').parent('.sel_wrap').children('select').children('option').removeAttr('selected').each(function() {
if ($(this).val() == tekval) {
$(this).attr('selected', 'select');
}
});
});Ну еще напишем меленький код который будет закрывать селект при холостом клике, blur так сказать:
var selenter = false;
$('.sel_imul').on('mouseenter', function() {
selenter = true;
});
$('.sel_imul').on('mouseleave', function() {
selenter = false;
});
$(document).click(function() {
if (!selenter) {
$('.sel_options').hide();
$('.sel_imul').removeClass('act');
}
});Напишем функцию которая будет превращать из обычного селекта такой т.е. писать за нас код, назовем его reselect():
function reselect(select, addclass) {
addclass = typeof(addclass) != 'undefined' ? addclass : '';
$(select).wrap('<div class="sel_wrap ' + addclass + '"/>');
var sel_options = '';
$(select).children('option').each(function() {
sel_options = sel_options + '<div class="sel_option" value="' + $(this).val() + '">' + $(this).html() + '</div>';
});
var sel_imul = '<div class="sel_imul">\
<div class="sel_selected">\
<div class="selected-text">' + $(select).children('option').first().html() + '</div>\
<div class="sel_arraw"></div>\
</div>\
<div class="sel_options">' + sel_options + '</div>\
</div>';
$(select).before(sel_imul);
}
});Ну вот как-то так!)))
На этом буду заканчивать. Если понравилась статья — подписывайтесь на обновления блога, а если есть вопросы — задавайте в комментариях. Также прошу выставлять рейтинг статьи, по нем я буду судить какие именно темы вам нравятся а какие нет.
С вами был, ваш Юрич!