Стилизация select
Стилизация select на чистом CSS без использования сторонних библиотек или JavaScript кода. А также бонус: рассмотрим как стилизовать select option при помощи JavaScript и jQuery

Стилизация select

Структура будет стандартной

<select size="1">
    <option>Слон</option>
    <option>Бегемот</option>
    <option>Жираф</option>
</select>

Чтобы в select отображаемая строка была одна используем атрибут size со значением 1.

Стилизация для нашего селекта

-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
background: url('path/img.png') no-repeat right center;
outline: 0;

Получаем

В примере выше мы прописали четыре строчки ccs свойства appearance с вендорными префиксами, чтобы свойство работало одинаково во всех браузерах. Что это за свойство читайте ниже.

Вся сложность заключалась лишь в замене стандартной стрелки в прямоугольнике, вместо которой мы реализовали background. Таким образом можно вставить любую картинку. Необходимо лишь подогнать размер при помощи свойства background-size

Appearance CSS

Реализовать нашу задачу помогло css3 свойство appearance

Данное свойство позволяет изменить вид элемента на: button, checkbox, radio, field, icon и многое другое. В нашем случае мы вообще скрыли элемент, используя none и добавили картинку с помощью background

Проверка открыт ли select

Будем изменять положение стрелки в зависимости от того открыт или закрыт select.

const select = document.querySelector('select');

    select.addEventListener('blur', () => selectEvent());
    select.addEventListener('click', () => selectEvent());

    selectEvent = () => {
        if (event.type == 'click') {
            if (select.classList.contains('change')) {
                select.classList.remove('change');
            } else {
                select.classList.add('change');
            }
        }
        if (event.type == 'blur') {
            select.classList.remove('change');
        }
    };

Стилизация select option

Для того чтобы стилизовать select option нам потребуется JavaScript

Демонстрация
<select class="select" name="language">
    <option disabled>Выбрать</option>
    <option value="HTML">HTML</option>
    <option value="JavaScript">JavaScript</option>
    <option value="PHP">PHP</option>
</select>
.select {
    display: block;
    max-width: 215px;
    width: 100%;
    position: relative;
}

.new-select {
    position: relative;
    border: 1px solid #ced4da;
    padding: 10px 15px;
    cursor: pointer;
    user-select: none;
}

.new-select__list {
    position: absolute;
    top: 45px;
    left: 0;
    border: 1px solid #ced4da;
    cursor: pointer;
    width: 100%;
    z-index: 2;
    background: #fff;
    user-select: none;
}

.new-select__list.on {
    display: block;
}

.new-select__item span {
    display: block;
    padding: 10px 15px;
}

.new-select__item span:hover {
    color: #12b223;
}

.new-select:after {
    content: '';
    display: block;
    width: 25px;
    height: 25px;
    position: absolute;
    right: 9px;
    top: 9px;
    background: url('path-to-image') no-repeat right center / cover;
    opacity: 0.6;

    -webkit-transition: all .27s ease-in-out;
        -o-transition: all .27s ease-in-out;
            transition: all .27s ease-in-out;

    -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
            transform: rotate(0deg);
}

.new-select.on:after {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
         -o-transform: rotate(180deg);
            transform: rotate(180deg);
}

Перед JavaScript-кодом должен быть подключен jQuery

$('.select').each(function() {
    const _this = $(this),
        selectOption = _this.find('option'),
        selectOptionLength = selectOption.length,
        selectedOption = selectOption.filter(':selected'),
        duration = 450; // длительность анимации


    _this.hide();
    _this.wrap('<div class="select"></div>');
    $('<div>', {
        class: 'new-select',
        text: _this.children('option:disabled').text()
    }).insertAfter(_this);

    const selectHead = _this.next('.new-select');
    $('<div>', {
        class: 'new-select__list'
    }).insertAfter(selectHead);

    const selectList = selectHead.next('.new-select__list');
    for (let i = 1; i < selectOptionLength; i++) {
        $('<div>', {
            class: 'new-select__item',
            html: $('<span>', {
                text: selectOption.eq(i).text()
            })
        })
        .attr('data-value', selectOption.eq(i).val())
        .appendTo(selectList);
    }

    const selectItem = selectList.find('.new-select__item');
    selectList.slideUp(0);
    selectHead.on('click', function() {
        if ( !$(this).hasClass('on') ) {
            $(this).addClass('on');
            selectList.slideDown(duration);

            selectItem.on('click', function() {
                let chooseItem = $(this).data('value');

                $('select').val(chooseItem).attr('selected', 'selected');
                selectHead.text( $(this).find('span').text() );

                selectList.slideUp(duration);
                selectHead.removeClass('on');
            });

        } else {
            $(this).removeClass('on');
            selectList.slideUp(duration);
        }
    });
});
Демонстрация

Input select

Более простой вариант при помощи input.

<div class="select">
    <input class="select__input" type="hidden" name="">
    <div class="select__head">Выберите</div>
    <ul class="select__list" style="display: none;">
        <li class="select__item">Стилизация select CSS</li>
        <li class="select__item">Стилизация select JavaScript</li>
        <li class="select__item">Стилизация select, используя input</li>
    </ul>
</div>

Стили.

.select {
    position: relative;
    display: block;
    min-width: 220px;
    width: 100%;
    max-width: 400px;
    margin-bottom: 20px;
}

.select__head {
    width: 100%;
    max-width: 100%;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 14px 15px;
    font-size: 14px;
    line-height: 18px;
    color: rgba(66, 67, 72, 0.8);
    cursor: pointer;
}

.select__head::after {
    width: 10px;
    height: 6px;
    background: #FFF url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.50495 5.78413L0.205241 1.25827C-0.0684138 0.970375 -0.0684138 0.503596 0.205241 0.215836C0.478652 -0.0719461 0.922098 -0.071946 1.19549 0.215837L5.00007 4.22052L8.80452 0.215953C9.07805 -0.0718292 9.52145 -0.0718292 9.79486 0.215953C10.0684 0.503736 10.0684 0.970492 9.79486 1.25839L5.49508 5.78425C5.35831 5.92814 5.17925 6 5.00009 6C4.82085 6 4.64165 5.928 4.50495 5.78413Z' fill='%23ED266A'/%3E%3C/svg%3E%0A") no-repeat center / cover;
    position: absolute;
    right: 20px;
    bottom: 50%;
    transform: translateY(50%);
    content: '';
    display: block;
    transition: .2s ease-in;
}

.select__head.open::after {
    transform: translateY(50%) rotate(180deg);
}

.select__list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    margin-top: 5px;
    max-height: 205px;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 100;
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: #424348;
    scrollbar-color: dark;
    scrollbar-width: thin;
    overscroll-behavior: contain;
}

.select__list::-webkit-scrollbar {
    width: 7px;
    background-color: #F8F9FA;
    padding: 5px;
}

.select__list::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #D9D9D9;
}

.select__list .select__item {
    position: relative;
    border-top: 1px solid rgba(224, 229, 231, 0.5);
    padding: 10px 15px;
    cursor: pointer;
    list-style-type: none;
}

.select__list .select__item:hover {
    background-color: rgba(224, 229, 231, 0.5);
}

jQuery код.

jQuery(($) => {
    $('.select').on('click', '.select__head', function () {
        if ($(this).hasClass('open')) {
            $(this).removeClass('open');
            $(this).next().fadeOut();
        } else {
            $('.select__head').removeClass('open');
            $('.select__list').fadeOut();
            $(this).addClass('open');
            $(this).next().fadeIn();
        }
    });

    $('.select').on('click', '.select__item', function () {
        $('.select__head').removeClass('open');
        $(this).parent().fadeOut();
        $(this).parent().prev().text($(this).text());
        $(this).parent().prev().prev().val($(this).text());
    });

    $(document).click(function (e) {
        if (!$(e.target).closest('.select').length) {
            $('.select__head').removeClass('open');
            $('.select__list').fadeOut();
        }
    });
});
Демонстрация

Если вам понравилась статья про стлизацию select, рекомендую прочитать про Стилизацию чекбоксов

Изучаем английский
EnglishRussian
SelectВыбирать, выбор
OptionВариант выбора
AppearanceВнешний вид
RotateВращение
LengthДлина
DurationПродолжительность
SlideUpСкользить вверх
SlideDownСкользить вниз
Админ admin
» »