Стиль для select css

З приходом CSS3 стало можливим зробити гарний стиль для будь-якого елемента на сайті. Тому що CSS3 дає широкий спектр можливостей, які прискорюють процес розробки дизайну для сайту. Сьогодні ми оформимо елемент select на CSS. Хто не знає, цей елемент відповідає за список, що випадає на сайті. Багато хто використовує стандартний вид, але його можна змінити, щоб він підходив по дизайну до Вашого сайту.

Немає нічого кращого, ніж побачити як виглядає список своїми очима:

дивитися прімерСкачать

Ось як виглядає цей Select оформлений на CSS:

Схожі статті на цю тему:

• Гарний випадає для сайту - робимо, що випадає
• Призначені для користувача стилі для форми на чистому CSS без javascript

А зараз опишу процес установки по кроках цього списку або просто Select.

1 крок. Підключаємо необхідні файли

Все просто. Після того як скачали архів з вихідними кодами звідти нам будуть потрібні 2 файли (style.css і select.js - якщо підключаєте перший варіант списку або select_demo2.js - якщо підключаєте другий варіант). Підключаємо ці два файли між тегами :

12

lt;link rel="Stylesheet" type="Text / css" href="Css / style.css" /gt;lt;script type=`Text / javascript` src=`Js / select.js`gt; lt;/scriptgt;

2 крок. HTML структура елемента Select

Нічого надскладного в структурі немає (та й звідки йому бути, адже це просто HTML # 128578; ). Проста форма, всередині якої випадає Select з його пунктами:

123456789101112

lt;form action="#"gt;lt;pgt;lt;label class="Label"gt; Країни Великої Британії:lt;/labelgt;lt;select class="Turnintodropdown"gt;lt;optiongt; Будь ласка, виберіть країну:lt;/optiongt;lt;optiongt; Англіяlt;/optiongt;lt;optiongt; Північна Ірландіяlt;/optiongt;lt;optiongt; Шотландіяlt;/optiongt;lt;optiongt; Уельсlt;/optiongt;lt;/selectgt;lt;/pgt;lt;/formgt;

3 крок. Додаємо стилі для Select CSS

Їх не багато. Я наводжу нижче стилі для першого варіанту списку. Хочу звернути увагу на шляху до зображень. Їх усього два: перше для того, щоб розкрити список, а другий - щоб закрити. Вони виглядають як двох стрілок «вгору» і «вниз» відповідно. Їх можна завантажити в місці з вихідними кодами які знаходяться на початку статті:

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394

.dropcontainer {position:relative-font-size: 16px-color: # 777-}.trigger {color: # 777-padding: 10px-font-size: 16px-width: 50%-background: #fff url(../images/select-arrow-open.jpg) 98% center no-repeat-display: block-border: 1px solid #ccc--webkit-box-sizing: border-box--moz-box-sizing: border-box-box-sizing: border-box--webkit-transition: all 0.5s ease--moz-transition: all 0.5s ease--o-transition: all 0.5s ease-transition: all 0.5s ease-}.trigger: hover {color: # 777-background: # f5f5f5 url(../images/select-arrow-open.jpg) 98% center no-repeat-}.activetrigger {color: # 777-padding: 10px-font-size: 16px-width: 50%-background: # f5f5f5 url(../images/select-arrow-close.jpg) 98% center no-repeat-display: block-border: 1px solid #ccc--webkit-box-sizing: border-box--moz-box-sizing: border-box-box-sizing: border-box-}.activetrigger: hover {background: # f5f5f5 url(../images/select-arrow-close.jpg) 98% center no-repeat-color: # 777-}.activetrigger: active {background: # f5f5f5 url(../images/select-arrow-close.jpg) 98% center no-repeat-color: # 777-}.dropcontainer ul {font-size: 16px-border: 1px solid #ccc-border-top: none-background: #fff-list-style-type: none-padding: 10px-margin: 0-width: 50%-z-index: 100--webkit-box-sizing: border-box--moz-box-sizing: border-box-box-sizing: border-box-}.dropcontainer ul li {padding: 5px--webkit-transition: all 0.5s ease--moz-transition: all 0.5s ease--o-transition: all 0.5s ease-transition: all 0.5s ease-}.dropcontainer ul li: hover {background: # f5f5f5-outline: none-}.dropcontainer ul li: First-child {display: none-}.dropcontainer ul li: Last-child {border-bottom: none-}.dropdownhidden {display: none-}.dropdownvisible {height: auto-}

У демо прикладі стилі розташовані в папці css. Тому коли ми задаємо шлях до папки з зображеннями в шляху ми спочатку пишемо ".."(Дві точки), щоб вийти на один рівень вгору. А потім заходимо в папку images.

Зараз хочу сказати що можна зробити, щоб не копіювати повністю стилі для другого варіанта списку (який з фіксованою висотою), а змінити одну властивість і отримати фіксований список.

Вам потрібно замінити остання властивість dropdownvisible:

123

.dropdownvisible {height: auto-}

На це:

1234

.dropdownvisible {height: 200px-overflow-y: scroll-}

І коли не забудете замінити скрипти (дивіться вище що на що міняти), то отримаєте наступне:

В яких браузерах цей Select CSS (список, що випадає) працює нормально?

• Firefox 24.0, Firefox 25.0, Firefox 26.0
• Chrome 29.0, Chrome 30.0, Chrome 31.0
• Opera 12.14, Opera 12.15, Opera 12.16
• IE 7.0, IE 8.0, IE 9.0, IE 10.0, IE 11.0
• Safari 5.1, Safari 6.0, Safari 6.1, Safari 7.0
• Apple IOS - iPhone 4S, iPhone 5, iPad 2 (5.0), iPad 3 (6.0), iPad Mini
• Android - Sony Experia X10, HTC One X, Kindle Fire 2, Google Nexus

Доповнення до уроку - креативний ефект при наведенні + ВІДЕО

На додаток до уроку хочу розповісти як зробити ще один ефект на сайті дуже незвичайним: ефект при наведенні. Подивіться це коротке відео і все самі побачите.

висновок

Ще один елемент сайту - Select можна змінити під свій дизайн на CSS і javascript. Нічого складного в процесі установки немає, тому у Вас все вийде. Також в якості доповнення до статті Ви отримуєте креативний спосіб при наведенні і відео по установці.

Основні пункти статті, щоб його можна було швидко до них перейти:

1. 1 крок. Підключаємо необхідні файли
2. 2 крок. HTML структура елемент Select
3. 3 крок. Додаємо стилі для Select CSS
4. В яких браузерах цей Select CSS
5. Доповнення до уроку - креативний ефект при наведенні + ВІДЕО

Успіхів!

джерело: оригінал

З повагою, Юрій Німець