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

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

Сейчас начало первого ночи, 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>

Далее приступим к стилям. Естественно скрываем наш обычный селект, а структуру эмилирующую селект стилизуем как нам хочется:

Здесь уже стили предусматривающие работу javascript’а, и несколько типов селектов.

Обязательно подключите jQuery, хотя бы так:

Дальше приступим к javascript‘у. Во первых сделаем так чтобы при клике на див эмулирующий select, открывался или закрывался список option’ов:

Теперь пишем событие которое будт менять значение обычного, скрытого, селекта и значение у эмулирующего селекта:

Ну еще напишем меленький код который будет закрывать селект при холостом клике, blur так сказать:

Напишем функцию которая будет превращать из обычного селекта такой т.е. писать за нас код, назовем его reselect():

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

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

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

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