Лого www.SiteHere.ru

Пользовательские стили для выпадающего списка

Пользовательские стили для выпадающего списка

Как владелец сайта, каждый старается сделать любой элемент на сайте особенным, чтобы не быть похожим на сайты конкурентов. По крайней мере мне не нравится чтобы мой сайт был похож еще на чей-то. Хочется чтобы даже маленькая кнопочка была уникальной! И поэтому в этом уроке мы рассмотрим как использовать пользовательские стили для выпадающих списков. Это также один из элементов на сайте, который можно стилизировать как нравится вам и так чтобы стиль выпадающего списка подходил под основной стиль сайта.

Пример можно увидеть здесь:

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

HTML часть

Помните как создается обычный список HTML? Он состоит из тегов <select> и <option>:

1
2
3
4
5
<select>
    <option></option>
    <option></option>
    <option></option>
</select>

Но сейчас нам необходимо обычный список сделать из элементов <span> и <div>:

1
2
3
4
5
6
7
8
9
<div class='selectBox'>
    <span class='selected'></span>
    <span class='selectArrow'></span>
    <div class="selectOptions" >
        <span class="selectOption" value="Option 1">Элемент 1</span>
        <span class="selectOption" value="Option 2">Элемент 2</span>
        <span class="selectOption" value="Option 3">Элемент 3</span>
    </div>
</div>

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
div.selectBox {
    position:relative;
    display:inline-block;
    cursor:default;
    text-align:left;
    line-height:30px;
    clear:both;
    color:#888;
}
span.selected {
    width:167px;
    text-indent:20px;
    border:1px solid #ccc;
    border-right:none;
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
    background:#f6f6f6;
    overflow:hidden;
}
span.selectArrow {
    width:30px;
    border:1px solid #60abf8;
    border-top-right-radius:5px;
    border-bottom-right-radius:5px;
    text-align:center;
    font-size:20px;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    background:	#4096ee;
    color:#fff;
}
 
span.selectArrow,span.selected {
    position:relative;
    float:left;
    height:30px;
    z-index:1;
}
 
div.selectOptions {
    position:absolute;
    top:28px;
    left:0;
    width:198px;
    border:1px solid #ccc;
    border-bottom-right-radius:5px;
    border-bottom-left-radius:5px;
    overflow:hidden;
    background:#f6f6f6;
    padding-top:2px;
    display:none;
}
 
span.selectOption {
    display:block;
    width:80%;
    line-height:20px;
    padding:5px 10%;
}
 
span.selectOption:hover {
    color:#f6f6f6;
    background:#4096ee;	
}

jQuery часть

В этой части добавим функционал для нашего списка. С помощью функции ниже мы определяем что запуститься следующая функция когда страница будет загружена:

1
2
3
$(document).ready(function() {
    enableSelectBoxes();
});

А реализация данной функции находится ниже:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function enableSelectBoxes(){
    $('div.selectBox').each(function(){
        $(this).children('span.selected').html($(this).children('div.selectOptions').children('span.selectOption:first').html());
        $(this).attr('value',$(this).children('div.selectOptions').children('span.selectOption:first').attr('value'));
 
        $(this).children('span.selected,span.selectArrow').click(function(){
            if($(this).parent().children('div.selectOptions').css('display') == 'none')
            {
                $(this).parent().children('div.selectOptions').css('display','block');
            }
            else
            {
                $(this).parent().children('div.selectOptions').css('display','none');
            }
        });
 
        $(this).find('span.selectOption').click(function(){
            $(this).parent().css('display','none');
            $(this).closest('div.selectBox').attr('value',$(this).attr('value'));
            $(this).parent().siblings('span.selected').html($(this).html());
        });
    });				
}

Вывод

Моё личное мнение: на вашем сайте должно быть всё уникальным, даже input-ы и выпадающие списки. Конечно вы можете со мной не согласиться, но это и делает сайт немного особенным.

Успехов!

Источник: http://www.onextrapixel.com/2012/06/20/create-a-custom-select-box-with-jquery/

Пользовательские стили для выпадающего списка 5.00/5 (100.00%) 1 голос(ов)

Понравилась статья - расскажи друзьям! :)

Бесплатный PDF отчет
Комментарии (3) к записи
  • Меховой магазин

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

     
    • Юрий

      Кодировку поправил.

       
  • Vavanina

    Недостатоток огараничение ширины у выпадающего списка, то есть если select 100px то и выпадающий список тоже 100px, и значение option будет записываться больше одной строке!

     

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

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