Css style select boxes

Содержание

Читайте также: Python upgrade setuptools pip

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

Links

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

Links

Made with

About a code

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

Author

Links

Made with

About a code

Select (Placeholder Disabled)

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

Author

Links

Made with

About the code

Custom Select Box

Custom select box dropdown styling.

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

Author

Links

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

Links

Made with

About the code

Pure CSS Select Box

Select box without using JavaScript and native element.

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

Author

Links

Made with

About the code

Responsive Custom Select Box

Responsive custom select box with custom scroll.

Author

Links

Made with

About the code

Image Selection

Image Selection with faux-loading.

Author

Links

Made with

About the code

Custom Select Wrapper

Custom CSS select wrapper.

Custom Select

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

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

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

Select Option Interaction

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

Select Boxes

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

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

CSS Only Select

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

Select Box With Placeholder

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

CSS Only Select

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

Pure CSS Select

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

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

Custom Select Box

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

Material Design Select

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

Источник

26 Best CSS Select Boxes 2023

If you’re looking for the perfect way to put a creative CSS select boxes on your site then you’re at the right place.

While you’re at it, why not add a sleek look to an interesting look? Today we are going to try to create a list of the best CSS select boxes with animated, simple, elegant and more options.

Below is a link to each demo and code piece. Whether you want to start with your own design or you are looking for a fully finished select boxes, you have it all.

So undoubtedly let’s get to the list.

1. Custom Select Field Styling

Custom Select Field Styling With Only CSS
Made By: Stephanie Eckles

2. Select-Boxes

Select-Boxes
Made By: Nipun Paradkar

Custom Select Box Dropdown Styling
Made By: FrankieDoodie

Pretty Select Dropdown
Made By: j0be

5. Select Option Interaction

Select Option Interaction
Made By: balapa

6. Custom Select

Custom Select
Made By: Yusuf

7. Select Box With Placeholder [CSS Only]

Select Box With Placeholder [CSS Only]
Made By: James Nowland

8. CSS Only Select (Radio+Checkbox) No JS

CSS Only Select ( Radio + Checkbox ) No JS
Made By: Aron

9. Simple Custom Select

Simple Custom Select
Made By: Alessandro Falchi

10. Pure CSS Select Box With Direction

Pure CSS Select Box With Direction Aware Hover Effect
Made By: Himalaya Singh

11. CSS Styled And Filterable Select

CSS Styled And Filterable Select Dropdown
Made By: Mari Johannessen

12. Custom Select Wrapper

Custom Select Wrapper
Made By: Matheus Sales

13. Custom Select An Option

Custom Select An Option
Made By: Dany Santos

14. Custom Select Box

Custom Select Box
Made By: Vijaya Kumar Vulchi

15. Select Options Using CSS3 And Flexbox

Styled “Select” Options Using CSS3 And Flexbox
Made By: Paul Grant

16. Pure CSS Select

Pure CSS Select
Made By: Raúl Barrera

17. Horizontal Select

Horizontal Select
Made By: Bharani

Magic With Details / CSS Only Dropdown
Made By: Steffen

19. Responsive Custom Select Box

Responsive Custom Select Box With Custom Scroll
Made By: Dejan Babić

20. Styling Select Box With CSS

Styling Select Box With CSS
Made By: Alex

21. Custom Select

Custom Select
Made By: Christophe CORBALAN

22. Custom Select

Custom Select
Made By: Nikolay Talanov

23. Material Design Select ( jQuery )

Material Design Select ( jQuery )
Made By: LukyVJ

Select Menu
Made By: Pierre Laurent

25. Selectionator

Selectionator
Made By: Benjamin

26. CSS3 Card Deck Drop Down

CSS3 Card Deck Drop Down
Made By: Tibor Katelbach

Источник

Стилизация Select с помощью css, как будто это 2020

Select – этот элемент трудно стилизовать для всех браузеров. Чтобы избегать его недостатки раньше, мы использовали обходные пути, такие как стилизация родительского элемента, добавление псевдоэлементов и даже использование JavaScript для создания подобного элемента управления из различных элементов, которые легче стилизовать. Но обходные пути сложно поддерживать и использовать, не говоря уже о проблемах доступности, которые создают пользовательские элементы.

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

Быстрый Пример

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

Ниже представлен тот же элемент select, стилизованный непосредственно с помощью CSS. Никаких дополнительных элементов обертки или псевдоэлементов не требуется (за исключением одного, который необходим для IE10 +):

HTML-код для приведенного select приведен ниже. Обратите внимание, что CSS применяется к любому select с классом select-css.

А вот CSS, управляющий select:

.select-css < display: block; font-size: 16px; font-family: sans-serif; font-weight: 700; color: #444; line-height: 1.3; padding: .6em 1.4em .5em .8em; width: 100%; max-width: 100%; box-sizing: border-box; margin: 0; border: 1px solid #aaa; box-shadow: 0 1px 0 1px rgba(0,0,0,.04); border-radius: .5em; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: #fff; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); background-repeat: no-repeat, repeat; background-position: right .7em top 50%, 0 0; background-size: .65em auto, 100%; >.select-css::-ms-expand < display: none; >.select-css:hover < border-color: #888; >.select-css:focus < border-color: #aaa; box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7); box-shadow: 0 0 0 3px -moz-mac-focusring; color: #222; outline: none; >.select-css option < font-weight:normal; >*[dir="rtl"] .select-css, :root:lang(ar) .select-css, :root:lang(iw) .select-css

Примечания по CSS

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

Select Устанавливается на display: block; по умолчанию, но вы можете поменять его, display: inline-block; width: auto; если хотите, чтобы он сидел рядом с label.
Фон select создается с использованием двух фоновых изображений: первое — это значок стрелки svg (выраженный в виде URI данных), а второе — повторяющийся линейный градиент. Любой URL может быть внешним изображением, если хотите. Если вы меняете изображение значка, имейте в виду, что его размер установлен в первом разделе последующего background-size: .65em auto, 100%; свойства. И его положение задается через background-position: right .7em top 50%, 0 0;(который находится .7em с правой стороны, соответственно). Кроме того, если размер изменяется, вы можете захотеть сделать более правый отступ для кнопки, чтобы она не перекрывала select текст, но имейте в виду, что в IE9 и более ранних версиях пользовательская стрелка не появится и браузер по умолчанию Стрелка будет отображаться слева от отступа, поэтому не добавляйте слишком много, иначе стрелка IE9 будет вставлена очень далеко.
Важно сохранить линейный градиентный фон, потому что его наличие на самом деле мешает IE9 и старше распознавать свойство background, и в результате он не будет показывать пользовательский значок рядом со своим невидимым собственным. Если вы хотите плоский цвет, используйте линейный градиент между двумя одинаковыми значениями цвета.
Appearance Правило и его и приставочные версии имеют важное значение, чтобы сбросить стили некоторых браузеров по умолчанию.
font-size: 16px; Правило важно , потому что IOS Safari будет увеличивать его в макете сайта , если select текст меньше 16px. Обычно такое поведение раздражает, поэтому мы стараемся избегать его с размером шрифта 16 пикселей на select.
.select-css::-ms-expand Правило предписывает IE11 и IE10 , чтобы скрыть псевдоэлемент меню значка, поэтому может появиться пользовательский значок позади него.

Как это выглядит в разных браузерах

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

Наслаждайтесь!

Обновление статьи 3.06.20

Стилизация пунктов option

В интернете есть много решений как стилизовать пункты выбора. Ниже приведены три популярных способа.

2. С помощью стилизации label со скрытыми input

3. С помощью списка li и скрытого input

Стилизация — это конечно хорошо, но доступность нужна не меньше.

Заменяя стандартные элементы управления самодельными, придется реализовывать штатные возможности самостоятельно.
В последних двух приведенных примерах без мыши/тачскрина (с помощью клавиатуры/скринридера) сделать ничего нельзя. Скринридер в режиме чтения тоже ограничен. После долгих изысканий в дизайне и функционале я пришел к выводу, что лучше просто оставить select как есть.

И это все. Спасибо за прочтение.

Источник