CSS оформление select
Доброй ночи, уважаемые посетители моего блога!
Сейчас начало первого ночи, 8 апреля. Сегодня у моей меньшей дочки день рождение — ей стукнуло 9 месяцев. Поздравляю ее с таким знаменательным днем и хочу пожелать самого главного в жизни — здоровья, а также ее родителя (то есть мне и моей жене) терпения.
С утра был отличнейший денек — солнышко, ветерка вообще не было и я прогулял в парке целых 3 часа с дочкой. Ей сегодня понравилось гулять, так как все эти 3 часа проспала (соня!) на свежем воздухе. А сейчас опять за окном дождь, настроения практически нет, но я себя заставлю написать этот пост))).
Как-то дорабатывал я знакомому сайт — магазин. И там надо было стилизовать выпадающий список, который делается не чем иным как тегом select. Так вот: порыв немного интернет я нашел что искал и сегодня я хочу поделиться тем что нашел.
Ко мне часто поступают вопросы про хостинг, которым я пользуюсь и поэтому решил указать хостинг в статье https://sprinthost.ru. Вы можете попробовать попользоваться хостингом 30 дней бесплатно. Чтобы понять, как будет работать Ваш сайт на этом хостинге просто перенести свой сайт (в этом поможет поддержка хостинга бесплатно) и и таким образом сможете понять подходит хостинг Вам или нет. На этом хостинге находятся сайты с 20 000 тысяч посещаемость и сайты чувствуют себя отлично. Рекомендую! Да, если делать оплату на 1 год то получаете скидку 25%. И что мне нравится — тех. поддержка всегда помогает в технических вопросах, за что им спасибо. Как Вы понимаете не всегда проходит всё гладко и нет желания, чтобы сайт не был доступен тем самым страдал трафик и доход.
В интернете есть наверное целая куча хаков и плагинов, которые дают возможность изменить стандартный 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); } });
Ну вот как-то так!)))
На этом буду заканчивать. Если понравилась статья — подписывайтесь на обновления блога, а если есть вопросы — задавайте в комментариях. Также прошу выставлять рейтинг статьи, по нем я буду судить какие именно темы вам нравятся а какие нет.
С вами был, ваш Юрич!