Если вы попытаетесь удалить стрелку раскрывающегося списка <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>

Если в браузере отключен JavaScript, вместо настраиваемого поля выбора появится обычное поле выбора. Так что это никоим образом не нарушит ваш код.

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.