Стилизация input select css

Стилизация select

Стилизация select на чистом CSS без использования сторонних библиотек или JavaScript кода. А также бонус: рассмотрим как стилизовать select option при помощи JavaScript и jQuery.

Стилизация select

Структура будет стандартной:

Чтобы в select отображаемая строка была одна используем атрибут size со значением 1.

Стилизация для нашего select.

-webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; background: url("path/img.png") no-repeat right center; outline: 0;

В примере выше мы прописали четыре строчки ccs свойства appearance с вендорными префиксами, чтобы свойство работало одинаково во всех браузерах. Что это за свойство читайте ниже.

Вся сложность заключалась лишь в замене стандартной стрелки в прямоугольнике, вместо которой мы реализовали background. Таким образом можно вставить любую картинку. Необходимо лишь подогнать размер при помощи свойства background-size

Appearance CSS

Реализовать нашу задачу помогло css3 свойство appearance.

Данное свойство позволяет изменить вид элемента на: button, checkbox, radio, field, icon и многое другое. В нашем случае мы вообще скрыли элемент, используя none и добавили картинку с помощью background.

Стилизация select option

Для того чтобы стилизовать select option нам потребуется JavaScript. Начнём с HTML и CSS.

 Выбрать HTML JavaScript PHP 

.select < display: block; max-width: 215px; width: 100%; position: relative; >.new-select < position: relative; border: 1px solid #ced4da; padding: 10px 15px; cursor: pointer; user-select: none; >.new-select__list < position: absolute; top: 45px; left: 0; border: 1px solid #ced4da; cursor: pointer; width: 100%; z-index: 2; background: #fff; user-select: none; >.new-select__list.on < display: block; >.new-select__item span < display: block; padding: 10px 15px; >.new-select__item span:hover < color: #12b223; >.new-select:after < content: ""; display: block; width: 25px; height: 25px; position: absolute; right: 9px; top: 9px; background: url("path-to-image") no-repeat right center / cover; opacity: 0.6; transition: all .27s ease-in-out; transform: rotate(0deg); >.new-select.on:after

Перед JavaScript-кодом должен быть подключен jQuery.

$(".select").each(function () < const _this = $(this), selectOption = _this.find("option"), selectOptionLength = selectOption.length, selectedOption = selectOption.filter(":selected"), duration = 450; // длительность анимации _this.hide(); _this.wrap(" "); $("", < class: "new-select", text: _this.children("option:disabled").text() >).insertAfter(_this); const selectHead = _this.next(".new-select"); $("", < class: "new-select__list" >).insertAfter(selectHead); const selectList = selectHead.next(".new-select__list"); for (let i = 1; i < selectOptionLength; i++) < $("", < class: "new-select__item", html: $("", < text: selectOption.eq(i).text() >) >) .attr("data-value", selectOption.eq(i).val()) .appendTo(selectList); > const selectItem = selectList.find(".new-select__item"); selectList.slideUp(0); selectHead.on("click", function () < if (!$(this).hasClass("on")) < $(this).addClass("on"); selectList.slideDown(duration); selectItem.on("click", function () < let chooseItem = $(this).data("value"); $("select").val(chooseItem).attr("selected", "selected"); selectHead.text($(this).find("span").text()); selectList.slideUp(duration); selectHead.removeClass("on"); >); > else < $(this).removeClass("on"); selectList.slideUp(duration); >>); >);

Input select

Более простой вариант при помощи input. Данный вариант мне нравится больше.

.select < position: relative; display: block; min-width: 220px; width: 100%; max-width: 400px; margin-bottom: 20px; >.select__head < width: 100%; max-width: 100%; box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); border-radius: 10px; padding: 14px 15px; font-size: 14px; line-height: 18px; color: rgba(66, 67, 72, 0.8); cursor: pointer; >.select__head::after < width: 10px; height: 6px; background: #FFF url('data:image/svg+xml,%3Csvg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http: //www.w3.org/2000/svg"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M4.50495 5.78413L0.205241 1.25827C-0.0684138 0.970375 -0.0684138 0.503596 0.205241 0.215836C0.478652 -0.0719461 0.922098 -0.071946 1.19549 0.215837L5.00007 4.22052L8.80452 0.215953C9.07805 -0.0718292 9.52145 -0.0718292 9.79486 0.215953C10.0684 0.503736 10.0684 0.970492 9.79486 1.25839L5.49508 5.78425C5.35831 5.92814 5.17925 6 5.00009 6C4.82085 6 4.64165 5.928 4.50495 5.78413Z" fill="%23ED266A"/%3E%3C/svg%3E%0A') no-repeat center / cover; position: absolute; right: 20px; bottom: 50%; transform: translateY(50%); content: ""; display: block; transition: .2s ease-in; >.select__head.open::after < transform: translateY(50%) rotate(180deg); >.select__list < display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); border-radius: 10px; margin-top: 5px; max-height: 205px; overflow-x: hidden; overflow-y: auto; z-index: 100; margin: 0; padding: 0; font-size: 14px; color: #424348; scrollbar-color: dark; scrollbar-width: thin; overscroll-behavior: contain; >.select__list::-webkit-scrollbar < width: 7px; background-color: #F8F9FA; padding: 5px; >.select__list::-webkit-scrollbar-thumb < border-radius: 10px; background-color: #D9D9D9; >.select__list .select__item < position: relative; border-top: 1px solid rgba(224, 229, 231, 0.5); padding: 10px 15px; cursor: pointer; list-style-type: none; >.select__list .select__item:hover

jQuery(($) => < $(".select").on("click", ".select__head", function () < if ($(this).hasClass("open")) < $(this).removeClass("open"); $(this).next().fadeOut(); >else < $(".select__head").removeClass("open"); $(".select__list").fadeOut(); $(this).addClass("open"); $(this).next().fadeIn(); >>); $(".select").on("click", ".select__item", function () < $(".select__head").removeClass("open"); $(this).parent().fadeOut(); $(this).parent().prev().text($(this).text()); $(this).parent().prev().prev().val($(this).text()); >); $(document).click(function (e) < if (!$(e.target).closest(".select").length) < $(".select__head").removeClass("open"); $(".select__list").fadeOut(); >>); >);

Проверка открыт ли select

Будем изменять положение стрелки в зависимости от того открыт или закрыт select.

const select = document.querySelector("select"); select.addEventListener("blur", () => selectEvent()); select.addEventListener("click", () => selectEvent()); selectEvent = (event) => < if (event.type == "click") < if (select.classList.contains("change")) < select.classList.remove("change"); >else < select.classList.add("change"); >> if (event.type == "blur") < select.classList.remove("change"); >>;

Если вам понравилась статья про стилизацию select, рекомендую прочитать про Стилизацию чекбоксов.

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.

Статьи из данной категории:

Комментарии ( 5 )

Здравствуйте, спасибо за такой пример и скрипт, но я попробовала его использовать, и заметила недочёты..
1. При загрузке страницы по умолчанию уже должно быть какое-то значение. Это не доработано в скрипте. Мне кажется вот здесь text:
_this.children(‘option:disabled’).text() должно быть не disabled, а
_this.children(‘option:selected’).text()
2. Первый по порядку option считается 0-й, то есть цикл нужно начинать с 0, а не с 1
for (let i = 0; i < selectOptionLength; i++) и т.д..
Иначе в псевдоселект добавляются пункты все, кроме первого
3. Мне кажется, что нужно добавить закрытие псевдоселлекта при клике вне этого блока. Потому, что если селекты расположенны рядом, то могут наезжать друг на друга открытые.
Спасибо!

Здравствуйте, Оксана. Спасибо за выявление недостатков скрипта. Как будет время, обязательно код будет исправлен и улучшен.

Здравствуйте! Подскажите, пожалуйста, в чем может быть причина, что не работает js код для селект нигде кроме хрома и сафари?

если несколько селектов на странице, как сделать что бы был открыт только один? открытый закрывается и открывается по которому кликнули

Источник

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

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

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

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

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

         
   First option   Second loooooong option Select something. 
  

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

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

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

Источник

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.

Related Articles:

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

CSS Only Dropdown

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

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

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

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

Pretty Select Dropdown

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

Источник