ФорумРазработкаКлиентская сторонаВерстка и оформление → Оформление элемента select

Оформление элемента select

  • aligator

    Сообщения: 52 Репутация: N Группа: Кто попало

    Spritz 12 ноября 2007 г. 20:04

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

    Select


    В коде элемент select выглядит, примерно, так:

    <select id="something" name="something" tabindex="101">
    <option value="1">Вариант 1</option>
    <option value="2">Вариант 2</option>
    <option value="3">Вариант 3</option>
    <option value="4">Вариант 4</option>
    <option value="5" selected="selected">Вариант 5</option>
    </select>

    а на странице он может выглядеть так:

    или так:

    в зависимости от операционной системы и браузера.

    Давайте представим, что мы хотим, чтобы он выглядел одинаково во всех браузерах и идеально подходил к дизайну сайта, например, нам нужен такой select:

    Как можно это сделать? Возможность оформления элемента select ограничена выбором цвета фона и текста, свойств границ и шрифта, остальные параметры отображения остаются неизменными.

    План


    Сразу приходит мысль о полной замене select другим элементом, и эмуляции его функциональности с помощью JavaScript, больше всего на замену select подходит элемент ul, который похож на него по структуре и семантике.

    Скрипт


    Ниже приведен скрипт, заменяющий все элементы select на списки, подражающие им поведением, в результате его работы, мы получаем такую форму:


    При этом сохраняется вся функциональность элемента select, в том числе возможность работать с клавиатуры и назначения ему tabindex, а возможности его оформления ограничиваются только вашей фантазией. Я подготовил пример, демонстрирующий возможности этого скрипта. Чтобы изучить скрипт вы можете скачать, подробно комментированный, исходник примера (zip), на странице код будет сильно сжат и не подсвечен, что значительно затрудняет просмотр.

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

    Скрипт протестирован в браузерах IE6, IE7, FF2, Opera 9, если вы обнаружите баги, сообщите, пожалуйста.

    Design For Masters

Пожалуйста, авторизуйтесь, чтобы написать комментарий!