Оформляємо красиво тег select за допомогою css
Щоб не створювати велику форму з вимикачами або перемикачами, іноді потрібно створити меню, що випадає або прокручуваний список. Для цих цілей ідеально підійде тег
За замовчуванням список вибору буде виглядати наступним чином:
HTML-код вищеописаного списку вибору:
Є деякі властивості, які ми можемо призначити тегу
Однак, як ви можете помітити, стрілка залишається на колишньому місці. Стилізувати стрілку навряд чи можна, проте рішення є - і воно досить просте.
Для початку створіть блок div і укладіть в нього наш список вибору (select).
Далі нам потрібно додати трохи CSS, щоб зафіксувати потрібне оформлення списку вибору.
Якщо ви встановите ширину списку вибору (select) більше ширини охоплює блоку (div), стрілка зникне.
Потім знайдіть стрілку відповідає вашому дизайну, наприклад:
Потім охоплює блоку призначте стиль і в ньому визначте положення нової стрілки.
Наш список вибору буде виглядати приблизно (стилі трохи інші) так:
Знаючи цю методику, ви легко зробить красивий тег select. використовуючи одне лише CSS.
Привіт, підкажіть будь ласка, як це відбувається, що хром не підтримує прозорість. дану форму чітко бачу за допомогою хрому працездатною тут, але цей же код розміщений на сторінці мого сайту не відображає цю форму повноцінно в цьому ж хромі, селектор блокує обгортку diva. хоча в лисиці і IE відображається правильно, правда в IE форма не кругла, але зелена і з кнопкою png, як і належить. нічого не розумію(.