Принцип призначеного для користувача оформлення select за допомогою css
Сам принцип не складний: ви вказуєте для селекта потрібний фон із зображенням, padding-right не менш, ніж керуючий елемент (щоб текст option не заїжджати на нього).
Але в чому ж була завжди заковика? У тому, що браузери хто на що здатний, вказують свої стилі і поміняти стрілочку в select вкрай складно. Тут доведеться вдатися до всіляких префіксам і Хакама.
1. Отже, нам знадобиться зображення для керуючого елемента select:
2. Хакі і властивості, щоб прибрати стандартне оформлення стрілки select
- за допомогою css3 властивості (на практиці діє поки тільки в Chrome, Safari і Opera, яка перейшла на їх движок):
3. Далі робимо стилі по дизайну, нічого особливого
Працюючий приклад css select
У верстці я використовую фрейворк Compass, тому приклад зроблений на SCSS. Але в цілому, це звичайно, легко зробити і на CSS, дотримуючись принципу, викладеного вище або просто відкривши наведений тут приклад в інструментах розробників і подивитися скомплірованний css код для елемента select.
Для того, щоб вказати і градієнт і зображення для керуючого елемента, я використовую @mixin background фреймворка Compass. На сервісі codepen цей миксин якось неадекватно генерує css, тому мені довелося зайти на офіційний сайт Compass та скопіювати початковий код @mixin background. У звичайній своїй верстці я не прописую його, так як цей миксин розробники фреймворка вже написали за мене (я лише імпортують файл @import "compass").
UPD 25.06.14 про firefox
З виходом 30 версії firefox даний приклад перестав працювати.
Виправлено некоректне застосування відступів до елементу
Поки Firefox виправляє свої помилки, але не в значенні властивості appearance. нам залишається забути цей приклад з хаком і користуватися далі по-старому способами: