Нельзя просто так взять и стилизовать select. Тут нужно идти обходными путями. Допустим, что мы хотим заменить изображение кнопки со стрелочкой вниз в select. Напрямую css не позволяет этого сделать, нам придётся схитрить. Мы поместим select внутрь div-а. У div-а сделаем невидимым содержимое, выходящее за его границу, ( overflow: hidden; ) и зададим ему точные размеры. Сам select сделаем с прозрачным фоном ( background: transparent; ). Теперь можно задать фоновую картинку для div-а и выровнять её вправо, тогда она будет вместо кнопки со стрелкой вниз ( background: url(cbx-selector.png) no-repeat right #c0c3ff; ) и она будет видна сквозь прозрачный фон select-а. Теперь важно задать select-у такую ширину, чтобы кнопка вышла за границу div-а и стала не видна на экране.
Вот итоговый файл стилей:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.form_cbx select { background: transparent; height: 34px; border: 0; /* убираем рамку, рамка будет у div-а такой, какой мы её сделаем. */ width: 750px; } .form_cbx { border: 1px solid #0000ff; /* делаем свою рамку */ overflow: hidden; /* всё, что выходит за границу не показываем */ height: 34px; background: url(cbx-selector.png) no-repeat right #c0c3ff; /* картинка кнопки со стрелкой вниз */ width: 700px; } |
И HTML-файл:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <title>Стилизация input select css</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <link rel="stylesheet" href="style.css" /> </head> <body> <p> <a href="https://urvanov.ru/2015/08/16/%D1%81%D1%82%D0%B8%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F-select-%D1%81-%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E-css">Статья про стилизацию select css</a> </p> <div class="form_cbx"> <select> <option value="1">Первый пункт</option> <option value="2">Второй пункт</option> <option value="3">Третий пункт</option> <option value="4">Четвёртый пункт</option> <option value="5">Пятый пункт</option> <option value="6">Шестой пункт</option> </select> </div> </body> </html> |
Результат можно посмотреть здесь:
не знаю кто ты но спасибо товарищ!
если размер текста больше заданной ширины селекта получаются траблы. кривое решение.
select {
appearance:none;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
}
Отключаем всё дефолтное оформление.
После этого уже можно добавлять фоновое изображение для стрелок справа
background: url(https://cdn2.iconfinder.com/data/icons/font-awesome/1792/sort-16.png) no-repeat right #fff;
background-position-x: 99%;
и прочее оформление
Главный минус — проблема позиционирования системных выпадающих списков. Они смещаются по разному в разных браузерах и исправить это мне не удалось.
Вообще круто, спасибо, но есть проблема, если объектов много, то их через size=»%» в скролл не загонишь, они начинают появляться в самом поле.