Оформляємо select css! Призначені для користувача стилі для select на css

Оформляємо select css! Призначені для користувача стилі для select на css

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

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

Оформляємо select css! Призначені для користувача стилі для select на css

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

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

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

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

Оформляємо select css! Призначені для користувача стилі для select на css

В яких браузерах цей 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

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

Добрий день, Миколо!

1. Щоб вибрати зберігався при оновленні сторінки, необхідно десь зберігати значення. Для цього необхідно використовувати якусь мову програмування і написати функціонал запису / зчитування з бази даних або файлу.

2. За ним і не повинно бути перекладу, тому що це, що випадає. Спочатку у нього немає такої властивості переходити на інші сторінки, але за допомогою jQuery ви можете вибрати будь-який елемент при натисканні на який користувач буде переходити на потрібний вам URL.

Юрій, добрий день. Спасибі за відповідь.

1. Для збереження пробував використовувати код нижче, працює, але тоді оформлення CSS злітає. Мабуть через додавання в select id = "city":

2. Якщо в звичайному СЕЛЕКТА прописати

то буде перехід по URL, зазначеним в value.

Але в цьому коді такий фокус не проходить чомусь.

Пробував змінювати рядок в запропонованому скрипті з урахуванням вишенапісанного,

Припускаю, що якісь рядки в скрипті конфліктують.