Стилизация тега select на CSS

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

Здесь мы разберем процесс стилизации select на чистом CSS, без использования JavaScript. Чтобы посмотреть, что у нас получиться в итоге, кликните по кнопке "Демо".

Смотреть видеоурок

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

Поэтому для стилизации select, чаще всего применяют не CSS, а jQuery. И в одном из следующих уроков, я обязательно расскажу о том, как можно сменить внешний вид тега select с помощью jQuery.

Добавить комментарий

  • стрелка не поворачивается

  • Классный сайт! Нашел ответ в другой статье. Спасибо.

  • Есть ли возможность изменить цвет опции у селекта с голубого на свой ?

  • Александр, Вы невероятно круты! Спасибо Вам большое))

  • Александр, большое спасибо за урок. Информативно, понятно, доступно.

  • Александр, спасибо за урок.
    Да, жаль, что с помощью CSS нельзя стилизовать выпадающий список. Думаю, что в большинстве случаев требуется полностью менять и сам select и список.
    А можно хотя бы сделать так, чтобы выпадающий список был одного размера с оберткой div, т.е. не вылезал за его границы?
    P.S. Можно еще добавить к div свойство cursor:pointer.

    • Дмитрий Беглов, так как мы с вами обрезали стрелочку select с помощью overflow: hidden, то при таком подходе, к сожалению, нельзя добиться равного размера самого select и его выпадающего списка. Это большой минус данного подхода.