Лого SiteHere.ru

Стиль для select CSS

Select CSS

С приходом CSS3 стало возможным сделать красивый стиль для любого элемента на сайте. Потому что CSS3 даёт широкий спектр возможностей, которые ускоряют процесс разработки дизайна для сайта. Сегодня мы оформим элемент select на CSS. Кто не знает, этот элемент отвечает за выпадающий список на сайте. Многие используют стандартный вид, но его можно изменить, чтобы он подходил по дизайну к Вашему сайту.

Нет ничего лучше, чем увидеть как выглядит список своими глазами:

Смотреть примерСкачать

Вот как выглядит этот Select оформленный на CSS:

Финальный вид списка

Похожие статьи на эту тему:

А сейчас опишу процесс установки по шагам этого выпадающего списка или просто Select.

1 шаг. Подключаем необходимые файлы

Всё просто. После того как скачали архив с исходниками оттуда нам будут нужны 2 файла (style.css и select.js — если подключаете первый вариант списка или select_demo2.js — если подключаете второй вариант). Подключаем эти два файла между тегами <head></head>:

HTML КОД
1
2
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type='text/javascript' src='js/select.js'></script>

2 шаг. HTML структура элемента Select

Ничего сверхсложного в структуре нет (да и откуда ему быть, ведь это просто HTML 🙂 ). Простая форма, внутри которой выпадающий Select с его пунктами:

HTML КОД
1
2
3
4
5
6
7
8
9
10
11
12
<form action="#">
    <p>
        <label class="label">Страны Великобритании:</label>
        <select class="turnintodropdown">
            <option>Пожалуйста, выберите страну:</option>
            <option>Англия</option>
            <option>Северная Ирландия</option>
            <option>Шотландия</option>
            <option>Уэльс</option>
        </select>
    </p>
</form>

3 шаг. Добавляем стили для Select CSS

Их немного. Я привожу ниже стили для первого варианта списка. Хочу обратить внимание на пути к изображениям. Их всего два: первое для того, чтобы раскрыть список, а второй — чтобы закрыть. Они выглядят в виде двух стрелочек «вверх» и «вниз» соответственно. Их можно скачать в месте с исходниками, которые находятся в начале статьи:

CSS КОД
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
.dropcontainer {
   position:relative;
   font-size: 16px;
   color: #777;
} 
 
.trigger {
   color: #777;
   padding: 10px;
   font-size: 16px;
   width: 50%;
   background: #fff url(../images/select-arrow-open.png) 98% center no-repeat;
   display: block;
   border: 1px solid #ccc;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease; 
   transition: all 0.5s ease;
}
 
.trigger:hover {
   color: #777;
   background: #f5f5f5 url(../images/select-arrow-open.png) 98% center no-repeat;
}
 
.activetrigger {
   color: #777;
   padding: 10px;
   font-size: 16px;
   width: 50%;
   background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
   display: block;
   border: 1px solid #ccc;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
 
.activetrigger:hover {
   background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
   color: #777;
}
 
.activetrigger:active {
   background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
   color: #777;
}
 
.dropcontainer ul {
   font-size: 16px;
   border: 1px solid #ccc;
   border-top: none;
   background: #fff;
   list-style-type: none;
   padding: 10px;
   margin: 0;
   width: 50%;
   z-index: 100;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
 
.dropcontainer ul li {
   padding: 5px;
   -webkit-transition: all 0.5s ease; 
   -moz-transition: all 0.5s ease; 
   -o-transition: all 0.5s ease; 
   transition: all 0.5s ease;
}
 
.dropcontainer ul li:hover {
   background: #f5f5f5;
   outline: none;
}
 
.dropcontainer ul li:first-child {
   display: none;
}
 
.dropcontainer ul li:last-child {
   border-bottom: none;
}
 
.dropdownhidden {
   display: none;
}
 
.dropdownvisible {
   height: auto;
}

В демо примере стили расположены в папке css. Поэтому когда мы задаем путь к папке с изображениями в пути мы сначала пишем ".." (две точки), чтобы выйти на один уровень вверх. А затем заходим в папку images.

Сейчас хочу сказать что можно сделать, чтобы не копировать полностью стили для второго варианта списка (который с фиксированной высотой), а изменить одно свойство и получить фиксированный список.

Вам нужно заменить последнее свойство dropdownvisible:

CSS КОД
1
2
3
.dropdownvisible {
    height: auto;
}

На это:

CSS КОД
1
2
3
4
.dropdownvisible {
    height: 200px;
    overflow-y: scroll;
}

И если не забудете заменить скрипты (смотрите выше что на что менять), то получите следующее:

Список с фиксированной высотой

В каких браузерах этот Select CSS (выпадающий список) работает нормально?

  • Firefox 24.0, Firefox 25.0, Firefox 26.0
  • Chrome 29.0, Chrome 30.0, Chrome 31.0
  • Opera 12.14, Opera 12.15, Opera 12.16
  • IE 7.0, IE 8.0, IE 9.0, IE 10.0, IE 11.0
  • Safari 5.1, Safari 6.0, Safari 6.1, Safari 7.0
  • Apple IOS – iPhone 4S, iPhone 5, iPad 2 (5.0), iPad 3 (6.0), iPad Mini
  • Android – Sony Experia X10, HTC One X, Kindle Fire 2, Google Nexus

Дополнение к уроку — креативный эффект при наведении + ВИДЕО

В дополнение к уроку хочу рассказать как сделать еще один эффект на сайте очень необычным: эффект при наведении. Посмотрите это короткое видео и всё сами увидите.

Вывод

Еще один элемент сайта — Select можно изменить под свой дизайн на CSS и Javascript. Ничего сложного в процессе установки нет, поэтому у Вас всё получится. Также в качестве дополнения к статье Вы получаете креативный способ при наведении и видео по установке.

Основные пункты статьи, чтобы Вы могли быстро к ним перейти:

  1. 1 шаг. Подключаем необходимые файлы
  2. 2 шаг. HTML структура элемент Select
  3. 3 шаг. Добавляем стили для Select CSS
  4. В каких браузерах этот Select CSS
  5. Дополнение к уроку — креативный эффект при наведении + ВИДЕО

Успехов!

Источник: Оригинал

С Уважением, Юрий Немец

29 комментариев к записи
  • Pavel

    Обычно использую для подобных целей плагин jQuery Form Styler, но для разнообразия то же сгодится. Спасбо!

     
  • Никита Волков

    Привет, Юр! Отписал тебе на почту. Есть проблемы с комментированием на сайте.

     
  • Александр

    А есть возможность тут вставить флажки к option и собственно в сам вывод выбранной страны?

     
    • Юрий

      Александр, конечно можно вставить checkbox-ы. Но хочу заметить что обычный select с помощью скрипта select.js преобразуется в ненумерованный список ul.

       
      • Александр

        я хотел сказать, вставить картинки, т.е. флаги стран))

         
        • Юрий

          Ну в этом я вообще не вижу проблемы 🙂 .

           
          • Александр

            сообразил с помощью li:before  😉

             
  • Сергей

    Здравствуйте.

    А можно реализовать сброс выбранного значения (допустим это Шотландия) и возврат к пункту выбора (Пожалуйста, выберите страну) ?

    Заранее спасибо!

     
    • Юрий

      Здравствуйте, Сергей!

      Да, конечно это возможно.

      С помощью jQuery необходимо изменить значение у ссылки с классом trigger, а также у скрытого поля сбросить значение.

       
  • Сергей

    Здравствуйте Юрий, спасибо за быстрый ответ!

    А вы можете подсказать, что конкретно нужно исправить? Очень нужно!

    Заранее спасибо!

     
  • Иван

    Душевный блог)) Почитал с удовольствием и кое-что обязательно возьму на вооружение)) Спасибо, Юрий!

     
  • Николай

    Пробую вставить код, но беда:

    1. Не сохраняется выбор?

    2. Вставляю ссылки <option value="http://…..>11111</option>, нет по ним перехода. Как мне сделать переход?

    Помогите плиз.

     
    • Юрий Немец

      Добрый день, Николай!

      1. Чтобы выбор сохранялся при обновлении страницы, необходимо где-то хранить значение. Для этого необходимо использовать какой-нибудь язык программирования и написать функционал записи/считывания из базы данных или файла.

      2. По ним и не должно быть перевода, потому что это выпадающий список. Изначально у него нет такого свойства переходить на другие страницы, но с помощью jQuery вы можете выбрать любой элемент по клику на который пользователь будет переходить на нужный вам URL.

       
      • Николай

        Юрий, добрый день. Спасибо за ответ.

        1. Для сохранения пробовал использовать код ниже, работает, но тогда оформление CSS слетает. Видимо из-за добавления в select id="city":

        function(){
            var select = document.getElementById('city');
            if (localStorage.city) {
                select.value = localStorage.city;
            }
            select.onchange = function() {
                localStorage.city = this.value;
            }
        }

        2. Если в обычном селекте прописать

        <select id="city" onchange="document.location=this.options[this.selectedIndex].value">

         , то будет переход по URL, указанным в value.

        Но в этом коде такой фокус не проходит почему-то.

        Пробовал изменять строку в предложенном скрипте с учетом вышенаписанного,

        newselect.onchange=function() {  window.location=this.options[this.selectedIndex].value;  }

        но не помогло.

        Предполагаю, что какие-то строки в скрипте конфликтуют.

         

         
  • Александр

    А как сделать несколько select'ов на странице? Что нужно доработать?

     
    • Юрий Немец

      Добрый день, Александр!

      Чтобы разместить несколько select-ов на странице, необходимо просто "разместить" несколько select-ов. Все завязано на классах, поэтому все стили нормально применяются.

      Вам лишь необходимо прописать свои обработчики формы для каждого случая.

       
      • Александр

        Юрий, смотрите. Я разместил на странице 2 select'a при нажатии на первый, все хорошо. Если нажимаю на второй, то выпадающий список находится под первым селектом и с данными первого селекта.

         
        • MaximFox

          Для будущих людей, которые здесь будут проходить.

          Ответ Александру. Чтобы такого не было, надо select оборачивать в тэг <p>

           
      • Сергей

        Доброго времени суток Юрий!

        плдскажите пожалуйста, как решить такую проблему

        при нажатии на select, выпадающий список оттягивает блок вниз, все что было слева от селекта уходит вниз, под список 🙁

         
        • Иван тот самый

          для form-inner добавь display:flex и будет все ок)

           
  • Rustam

    Извиняюсь, но это только я заметил или … В ХТМЛ коде нет ни UL, ни Li — так что же тут настраиваем то? Пример посмотрите — исходный код. Будете очень удивлены ))

     
    • Иван

      Ul and li с помощью js генерируется surprise 

       
  • Евгения

    Скажите optgroup никак не стилизуется? и его лейбл?

     
  • Александр

    А как сделать событие при выборе? Если у меня значение value в option есть, куда оно девается? Я сортировку сделать хочу

     
    • Юрий Немец

      Здравствуйте, Александр!
      Оно никуда не девается, просто select преобразовывается в UL список.

       
  • Александр

    Добрый день! Подскажите, как во втором примере прикрепить ссылку к каждому пункту для перехода на http?

     
    • Юрий Немец

      Добрый день, Александр!
      Можно сделать обработчик с помощью Javascript и при клике будем происходить переадресация на любой адрес.

       
      • Александр

        Спасибо! А как это сделать можете помочь?

         

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Содержание