Как создать собственный дизайн (с изображением) для тега выбора html (кроссбраузерный)?
Я пытаюсь найти способ создать кроссбраузерный (все основные браузеры) тег select с индивидуальным дизайном, отвечающим требованиям:
- Использует несколько строк кода
- Кроссбраузерный
- Быстрый (не загружается через 1-2 секунды после того, как пользователь увидит страницу)
- Легко воспроизвести
Некоторые, как я обнаружил, работают только на Firefox, а другие используют webkit, но возятся с другими стили. Затем я начал жарить некоторые клетки мозга, чтобы проверить свои варианты. И я попробовал следующее:
1-е решение
Использование изображения в качестве фона только с помощью CSS, но я не мог удалить границу chrome, когда активен.
Из-за -webkit-appearance: none;стрелка убрана(и это здорово), но я не могу сделать это на firefox.
2-е решение
Попытка замены/использования select в качестве divс помощью jquery, где некоторые люди посоветовали использовать этот плагин, созданный некоторыми парнями из Болгарии, который кажется отличным , но я все еще думаю, что это слишком причудливо.
Третье решение
Добавление тега span/div в верхней части выбора. Я потратил некоторое время на это и не мог сделать это самостоятельно. Нашел вопросот 1 года назад о проблеме, с которой я столкнулся при попытке реализовать, которая имитировала щелчок по тегу select (как если бы пользователь щелкнул). В конце концов я решил остановиться на униформе. Хотя их плагин делает больше, чем мне нужно, он подходит и для решения проблемы.
Первое решение вообще не помогло решить мою проблему (возможно, неправильный подход или код css). 2-й и 3-й используют слишком много строк кода (плагины и все такое). Есть ли другой способ, о котором я не подумал, или что-то, что соответствует всем требованиям?