Как создать настраиваемое поле <select> в HTML с помощью CSS и jQuery

Если вы попытаетесь удалить стрелку раскрывающегося списка <select>, используя такое CSS-свойство, как backgroundэто не приведет к желаемому результату, поскольку большинство элементов формы являются встроенной частью браузеров и поэтому поля выбора отображаются по-разному в разных браузерах, таких как Firefox, Chrome, Safari, IE и т. д.

В этом руководстве мы настроим поле <select> так, чтобы оно отображалось одинаково во всех браузерах с помощью CSS и jQuery. На самом деле, в этом примере мы будем настраивать только часть со стрелкой раскрывающегося списка в поле выбора и оставим остальную часть как есть.

Это решение легко реализовать в любом проекте, и оно хорошо совместимо с браузерами, даже работает в Internet Explorer 7. Это настраиваемое поле выбора придает вашему веб-сайту уникальный внешний вид даже в простой форме, однако вы можете расширить этот пример, чтобы создать полностью настраиваемое поле <select>.

HTML-код

Создадим обычное поле <select> с классом .custom-select. Использование класса .custom-select обязательно для отслеживания всех поля выбора в документе, который необходимо кастомизировать, а остальные оставить по умолчанию. Давайте посмотрим на следующий пример:

<form action="action.php" method="post">
    <p>Какое ваше любимое времяпровождение:</p>        
    <select name="timepass" class="custom-select">
        <option>Выбор</option>
        <option>Вождение</option>
        <option>Интернет</option>
        <option>Фильмы</option>
        <option>Музыка</option>
        <option>Спорт</option>
    </select>
</form>

CSS-код

Что мы пытаемся сделать с помощью CSS, так это скрыть поля <select> по умолчанию с помощью CSS-свойства opacity и вместо них показать тег <span>.

Теперь поместим следующие стили в заголовок вашего HTML-документа.

<style>
    .select-wrapper{
        float: left;
        display: inline-block;
        border: 1px solid #d8d8d8;            
        background: url("arrow.png") no-repeat right center;
        cursor: pointer;
    }
    .select-wrapper, .select-wrapper select{
        width: 200px;
        height: 26px;
        line-height: 26px;
    }
    .select-wrapper:hover{
        background: url("arrow-hover.png") no-repeat right;
        border-color: #239fdb;
    }
    .select-wrapper .holder{
        display: block;
        margin: 0 35px 0 5px;
        white-space: nowrap;            
        overflow: hidden;
        cursor: pointer;
        position: relative;
        z-index: -1;
    }
    .select-wrapper select{
        margin: 0;
        position: absolute;
        z-index: 2;            
        cursor: pointer;
        outline: none;
        opacity: 0;
        /* CSS-хаки для добавления непрозрачности в старых браузерах */
        _noFocusLine: expression(this.hideFocus=true); 
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        -khtml-opacity: 0;
        -moz-opacity: 0;
    }
</style>

jQuery-код

Этот код jQuery будет отслеживать все поля <select> в документе, имеющие класс .custom-select, и добавлять дополнительные элементы HTML вокруг полей выбора, чтобы заменить стрелку раскрывающегося списка нашим настраиваемым раскрывающимся изображением.

Не забудьте включить jQuery в свой документ перед этим скриптом для корректной работы.

<script>
    $(document).ready(function(){
        $(".custom-select").each(function(){
            $(this).wrap( "<span class='select-wrapper'></span>" );
            $(this).after("<span class='holder'></span>");
        });
        $(".custom-select").change(function(){
            var selectedOption = $(this).find(":selected").text();
            $(this).next(".holder").text(selectedOption);
        }).trigger('change');
    })
</script>