Displaying items by tag: select

Я данной статье я хочу рассказать о стилизации select'а на чистом CSS для Chrome, Safari, Firefox и IE9+ без добавления дополнительных элементов.

Опубликовано в HTML/CSS

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

 

Опубликовано в HTML/CSS

В этой статье рассмотрим элементы управления, благодаря которым пользователь может обмениваться данными с сайтом - регистрация, авторизация, поиск, онлайн-калькулятор и многое другое. Любая форма на сайте запрашивает у пользователя ввести какие-то данные в определенные поля и отправляет их на сервер. 

Опубликовано в HTML/CSS

Как мы знаем, элементы управления типа <select>, <input type="radio">, <input type="checkbox"> нельзя стилизировать с помощью стилей css. Для этого нужно использовать Javascript.

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

Хочу обратить внимание на то, что у radio и checkbox есть два состояния - выбранный и не выбранный. Для этого введем еще один блок, внутри основного, который будет появляться только для выбранного состояния.

У элемента select также есть два состояния - открытое и закрытое. В закрытом состоянии видно только выбранный пункт списка вариантов, а в открытом виден весь список.

 

Опубликовано в Js/jQuery

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов