CSS оформление select

Статья читается: 4 мин.

Доброй ночи, уважаемые посетители моего блога!

Сейчас начало первого ночи, 8 апреля. Сегодня у моей меньшей дочки день рождение — ей стукнуло 9 месяцев. Поздравляю ее с таким знаменательным днем и хочу пожелать самого главного в жизни — здоровья, а также ее родителя (то есть мне и моей жене) терпения.

С утра был отличнейший денек — солнышко, ветерка вообще не было и я прогулял в парке целых 3 часа с дочкой. Ей сегодня понравилось гулять, так как все эти 3 часа проспала (соня!) на свежем воздухе. А сейчас опять за окном дождь, настроения практически нет, но я себя заставлю написать этот пост))).

Как-то дорабатывал я знакомому сайт — магазин. И там надо было стилизовать выпадающий список, который делается не чем иным как тегом select. Так вот: порыв немного интернет я нашел что искал и сегодня я хочу поделиться тем что нашел.

В интернете есть наверное целая куча хаков и плагинов, которые дают возможность изменить стандартный 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”, в начале которого выстроим структуру нашего селекта дивами. Если представить это все дело на картинке то получится следующая картина:

select-structure

А код получится следующим:

<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);

}
});

Ну вот как-то так!)))

На этом буду заканчивать. Если понравилась статья — подписывайтесь на обновления блога, а если есть вопросы — задавайте в комментариях. Также прошу выставлять рейтинг статьи, по нем я буду судить какие именно темы вам нравятся а какие нет.

С вами был, ваш Юрич!

Вам понравилась статья?
плохохорошо (Пока оценок нет)
Загрузка...
Обо мне
Юрич:
Занимаюсь созданием сайтов на ВордПресс более 5 лет. Работал в нескольких веб-студиях, да и сейчас работаю. Иногда подрабатываю на фрилансе, как на нашем так и на зарубежном. Везде зарекомендовал себя очень хорошо. Если нужен сайт на вордресс, шаблон для сайта или лендинг - не стесняйтесь - пишите. Рад буду помочь!