Как создать пользовательский дизайн (с изображением) для тега выбора html (crossbrowser)?

Я пытаюсь найти способ создания кроссбраузерный(все основные браузеры) и выберите тег с индивидуальным дизайном, который отвечает требованиям:

  • использует несколько строк кода
  • Crossbrowser
  • быстро (не загружайте 1-2 секунды после того, как пользователь увидит страницу)
  • легко повторить

некоторые я нашел работает только на firefox и другие с помощью webkit, но возиться с другими стилями. Затем я начал жарить клетки мозга, чтобы проверьте мои варианты. И я попробовал это:

1-й раствор

использование изображения в качестве фона только с css, но я не мог удалить границу на хром когда активный. Из-за -webkit-appearance: none; стрелка удаляется (что здорово), но я не могу сделать это на в Firefox.

2-е решение

попытка замены / использования выберите как div С помощью jquery, где некоторые люди советовали использовать это плагин сделан некоторые ребята в Болгарии, что кажется отличным, но я все еще думаю, что это слишком причудливо.

3-е решение

добавление тега span/div в верхней части select. Я потратил некоторое время на это и не мог сделать это самостоятельно. Нашел вопрос от 1 года назад о проблеме, с которой я столкнулся при попытке реализовать, которая имитировала щелчок по тегу select(как если бы пользователь нажал). Наконец, я решил пойти с униформа. Хотя их плагин делает больше, чем мне нужно, он также подходит для решения проблемы.

1-е решение не смогло решить мою проблему вообще (возможно, неправильный подход или код css). 2nd и 3rd используют слишком много строк кода (будучи плагинами и все). Есть ли другой способ, о котором я не думал или что-то, что соответствует всем требованиям?

7
cross-browser css css3 html5 jquery

2 ответов

оформить - это довольно аккуратный и простой плагин. Да, это зависит от jquery, но, предполагая, что архитектура сайта имеет высокое качество, это не повлияет на рендеринг после .файлы js сначала кэшируются.

Если ваш сайт использует ajax для доставки содержимого страницы, любой pre-domready флеш-контента нестилизованный можно вообще избежать.

3

Эй вы можете сделать это так, как это

в CSS

label.custom-select {
    position: relative;
    display: inline-block;

}

    .custom-select select {
        display: inline-block;
        padding: 4px 3px 3px 5px;
        margin: 0;
        font: inherit;
        outline:none; /* remove focus ring from Webkit */
        line-height: 1.2;
        background: #000;
        color:white;
        border:0;
    outline:none;
    }




    /* Select arrow styling */
    .custom-select:after {
        content: "▼";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        font-size: 60%;
        line-height: 30px;
        padding: 0 10px;
        background: green;
        color: white;
    }

    .no-pointer-events .custom-select:after {
        content: none;
    }

HTML-код

<label class="custom-select">

    <select>
        <option>Sushi</option>
        <option>Blue cheese with crackers</option>
        <option>Steak</option>
        <option>Other</option>
    </select>
</label>

видео здесь http://jsfiddle.net/rohitazad/XxkSC/555/

2