Главная » Языки программирования

Стилизация select css пример

На чтение 9 мин
Содержание
  1. Кастомизируем select на чистом css
  2. 35 Cool CSS Select Boxes
  3. 31 CSS Select Boxes
  4. Related Articles:
  5. Author
  6. Links
  7. Made with
  8. About a code
  9. Custom Select Field Styling with Only CSS
  10. Author
  11. Links
  12. Made with
  13. About a code
  14. CSS Only Dropdown
  15. Author
  16. Links
  17. Made with
  18. About a code
  19. Select (Placeholder Disabled)
  20. Author
  21. Links
  22. Made with
  23. About the code
  24. Custom Select Box
  25. Author
  26. Links
  27. Made with
  28. About the code
  29. Pure CSS Select Box with Direction Aware Hover Effect
  30. Author
  31. Links
  32. Made with
  33. About the code
  34. Pure CSS Select Box
  35. Author
  36. Links
  37. Made with
  38. About the code
  39. Responsive Custom Select Box
  40. Author
  41. Links
  42. Made with
  43. About the code
  44. Image Selection
  45. Author
  46. Links
  47. Made with
  48. About the code
  49. Custom Select Wrapper
  50. Custom Select
  51. Custom Select An Option
  52. Material Design Select Dropdown
  53. Select Option Interaction
  54. Select Boxes
  55. CSS Styled And Filterable Select Dropdown
  56. CSS Only Select
  57. Select Box With Placeholder
  58. CSS Only Select
  59. Pure CSS Select
  60. Pretty Select Dropdown
  61. Custom Select Box
  62. Material Design Select

Кастомизируем select на чистом css

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

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

В своем варианте кастомизации я, так же как и предыдущий автор, использовал label, input[type=«radio»] и мощь css-селекторов. Так как сам селект средствами css полностью кастомизировать нереально, я имитировал поведение селекта.

Для начала, я накидал вот такую разметку:

При просмотре данного кода у вас мог возникнуть вопрос: «Почему у всех инпутов одинаковое имя?». Отвечу сразу: это сделано для того, чтобы наш селект адекватно вел себя(открывался и закрывался тогда, когда нужно). Но обо всем по порядку. Давайте перейдем к самой интересной, на мой взгляд, части — css.

/* скрываем все инпуты, чтобы все выглядело красиво */ input < display: none; >/* стилизуем стандартный текст лейбела(желательно смотреть этот стиль после .items) */ #text < position: absolute; display: block; top: 0; padding-left: 10px; >/* Задаем параметры нашего селекта - ширину, высоту и line-height(для центрирования текста по вертикали;этот парметр меньше ширины на 4px, т.к. в нашем блоке есть border размером в 2px со всех сторон) */ .select < display: inline-block; width: 160px; height: 34px; line-height: 30px; position: relative; >/* Это наша стрелочка, показывающая, что селект можно раскрыть */ .select:before < content: ">"; display: inline-block; background: white; position: absolute; right: -5px; top: 2px; z-index: 2; width: 30px; height: 26px; text-align: center; line-height: 26px; border: 2px solid #ddd; transform: rotate(90deg); cursor: pointer; > /* Если ничего не выбрано, то наш изначальный текст черного цвета, как и должно быть */ .select input[name="list"]:not(:checked) ~ #text < color: black; background: white; >/* Если же что-то выбрано, то наш текст становится невидимым и встает сверху выбранного параметра, чтобы при клике на него можно было заного открыть селект, что не было реализовано прошлым автором */ .select input[name="list"]:checked ~ #text < background: transparent; color: transparent; z-index: 2; >/* Стилизация выключенного селекта */ #select:disabled ~ .items #text < background: #eee; >/* Стилизация блока с опциями. min-height сделана для фикса высоты при абсолютном позиционировании, overflow же сделан для фиксированной высоты(см. ниже) */ .items < display: block; min-height: 30px; position: absolute; border: 2px solid #ddd; overflow: hidden; width: 160px; cursor: pointer; >/* Если наш селект закрыт, то он имеет высоту 30px(сделано для того, чтобы слишком большие надписи не растягивали его в высоту) */ #select:not(:checked) ~ .items < height: 30px; >/* Все лейбелы(названия опций) изначально скрыты */ .items label < border-top: 2px solid #ddd; display: none; padding-left: 10px; background: white; >/* Тут много объяснять не надо - просто выделение при наведении */ .items label:hover < background: #eee; cursor: pointer; >/* Опять же фикс из-за абсолютного позиционирования */ #select:checked ~ .items < padding-top: 30px; >/* Если наш селект открыт, то надо сделать все опции видимыми */ #select:checked ~ .items label < display: block; >/* Если какая-либо опция была выбрана, то сделать ее видимой(при выборе селект автоматически закроется) */ .items input:checked + label < display: block!important; border: none; background: white; >/* При открытии селекта создать подложку во весь экран, при клике на которую селект закроется, а значение останется пустым. background сделан для наглядности */ #select:checked ~ .bg

Вот она — самая интересная часть, в которой надо осмыслить как смена выбора инпута (все инпуты с типом радио имеют одинаковое имя => мы можем выбрать только один из них) влияет на наш селект. Еще одной особенностью этого варианта является возможность отключить селект, используя атрибут disabled на #select.

Читайте также:  Expires header in php

Готовый пример вы можете найти здесь.

Вот, собственно, и все. Парочка минусов предыдущего автора пофикшены, так что это решение, полагаю, на данный момент можно считать идеальным css-вариантом селекта. Надеюсь, мое решение кому-нибудь пригодится.

Источник

35 Cool CSS Select Boxes

Check these cool select boxes, most are made with CSS only and some with little js.

You may also like

  • CSS Radio Buttons
  • 75 CSS Text Animations You Can Use
  • 15 Amazing CSS Animated Background for you to try
  • 57 Beautiful CSS Cards examples to improve your UI
  • 19 Cool CSS Loading Animation to inspire you
  • 17 Fancy CSS Search Boxes
  • 21 Modern CSS menu examples
  • 19 Stylish CSS forms
  • 23 Fantastic CSS Hover Effects
  • 19 CSS Border Animations you can implement
  • 15 Stylised CSS Tables
  • 13 Pure CSS Dropdown Menus
  • 15 Creative CSS Filter Examples
  • 35 Unique CSS Text Effects
  • 15 CSS Sliders you can use
  • 21 New Bootstrap Login Forms for you
  • 19 Bootstrap Profiles you can use for yourself
  • 13 Material Design Login Forms
  • 15 CSS Range Sliders you can use today
  • 35 Creative use of CSS clip-path examples
  • 29 Unique CSS Toggle Switches
  • 41 Beautiful CSS Animation Examples

Pure CSS Select Box

Dev: Veniamin

Pure CSS Select Box With Direction Aware Hover Effect

Dev: Himalaya Singh

Pure CSS Select Box Styling

Dev: Anselm Urban

Custom Select Box Dropdown Styling

Dev: FrankieDoodie

Select Box with Placeholder [CSS Only]

Dev: James Nowland

uSwitch pure CSS select control v1.0

Dev: Craig Morey

Custom select box

Dev: James Barnett

Custom select box by VJ

Читайте также:  Use python from command line

See the Pen Custom select box by VJ by Vijaya Kumar Vulchi (@vulchivijay) on CodePen.

Dev: Vijaya Kumar Vulchi

Responsive custom select box with custom scroll

Dev: Dejan Babić

Flat selectbox

Dev: Peter Geller

Pure CSS “select” box

Dev: Thierry

CSS Select Box

See the Pen CSS Select Box by Josh Valdivieso (@Xero2112) on CodePen.

Dev: Josh Valdivieso

CSS Select box

Customizable Pure CSS Select Box Mixin

Dev: Jason Muscarella

css select box

Dev: hoahuongduong_dh08dt

CSS3:SelectBox with Only CSS

custom select box CSS3

Dev: Gulshan kumar

Custom select with SASS (no JS)

Dev: Jeroen van Beek

Custom select box

Dev: rajeshdn

css – Custom select box arrow

Magic with details // CSS Only Dropdown

Dev: Steffen

Pure CSS Dropdown

See the Pen Pure CSS Dropdown by Rafael González (@rgg) on CodePen.

Dev: Rafael González

CSS Dropdown

Dev: Tadaima

Select (placeholder disabled)

Dev: Andreas Storm

Pure CSS Select 2.0

Dev: Raúl Barrera

Pure CSS Select

See the Pen Pure CSS Select by Raúl Barrera (@raubaca) on CodePen.

Dev: Raúl Barrera

CSS only Select ( radio + checkbox ) No JS

CSS / select with SVG arrow as background image

Dev: henning fischer

pure css select with colorable svg arrow

Dev: Jan Wagner

Full CSS stylized select V2

Dev: Vincent Durand

Custom Select an Option

Dev: Dany Santos

Pure CSS Select Component

Dev: Arnau Pujol

Select-Boxes

See the Pen Select-Boxes by Nipun Paradkar (@radiantshaw) on CodePen.

Dev: Nipun Paradkar

Image Selection with faux-loading

Dev: Lewis Robinson

Material design select box

Dev: Valentin Mocanu

Источник

31 CSS Select Boxes

Collection of free HTML and CSS custom select box code examples: dropdown, multiple, custom arrow, etc. Update of April 2019 collection. 4 new items.

Author

Made with

About a code

Custom Select Field Styling with Only CSS

Demo of how to create a cross-browser custom styled select.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS Only Dropdown

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Читайте также:  Python confluence update page

Author

Made with

About a code

Select (Placeholder Disabled)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Custom Select Box

Custom select box dropdown styling.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Pure CSS Select Box with Direction Aware Hover Effect

Pure CSS select box without any JavaScript. When there is hover on an option the motion of icon inside option is decided by the direction of hover i.e up hover or down hover (direction aware hover effect).

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Pure CSS Select Box

Select box without using JavaScript and native element.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Responsive Custom Select Box

Author

Made with

About the code

Responsive Custom Select Box

Responsive custom select box with custom scroll.

Demo image: Image Selection

Author

Made with

About the code

Image Selection

Image Selection with faux-loading.

Demo image: Custom Select Wrapper

Author

Made with

About the code

Custom Select Wrapper

Custom CSS select wrapper.

Demo Image: Custom Select

Custom Select

A HTML, CSS and jQuery custom select.
Made by Alessandro Falchi
April 5, 2017

Demo Image: Custom Select An Option

Custom Select An Option

Custom select, designed to change the typical style of the select in browsers, using JS to display the list when it clicks, and SCSS, to give it style. The Attribute selected work good, test it.
Made by Dany Santos
February 8, 2017

Demo Image: Material Design Select Dropdown

Material Design Select Dropdown

Material Design select dropdown with HTML, CSS and JavaScript.
Made by Sam Murphey
January 20, 2017

Demo Image: Select Option Interaction

Select Option Interaction

Great example of clean animation. Built with TweenMax GSAP.
Made by Bhakti Al Akbar
December 7, 2016

Demo Image: Select Boxes

Select Boxes

Select-boxes with HTML, CSS and JS.
Made by Nipun Paradkar
October 22, 2016

Demo Image: CSS Styled And Filterable Select Dropdown

CSS Styled And Filterable Select Dropdown

Select dropdown — styled and filterable using HTML, CSS and vanilla JS. Works using a input field to grab the value from the dropdown list.
Made by Mari Johannessen
October 13, 2016

Demo Image: CSS Only Select

CSS Only Select

CSS only select (radio + checkbox).
Made by Aoyue
August 24, 2016

Demo Image: Select Box With Placeholder

Select Box With Placeholder

HTML and CSS select box with placeholder.
Made by James Nowland
May 16, 2016

Demo Image: CSS Only Select

CSS Only Select

Select input using radio inputs.
Made by Nicolas Udy
May 9, 2016

Demo Image: Pure CSS Select

Pure CSS Select

Select input, only CSS.
Made by Raúl Barrera
April 8, 2016

Demo Image: Pretty Select Dropdown

Pretty Select Dropdown

This still uses inputs to maintain the form submission variables, while relying primarily on CSS.
Made by j0be
January 15, 2016

Demo Image: Custom Select Box

Custom Select Box

Custom select box with jQuery.
Made by Vijaya Kumar Vulchi
January 7, 2016

Demo Image: Material Design Select

Material Design Select

Material design select jQuery version.
Made by LukyVJ
January 3, 2016

Источник

Оцените статью
© 2023 Программирование