Html select style display none

Стилизация 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 код для селект нигде кроме хрома и сафари?

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

Источник

Как убрать пустой тег Option в Select

В данной мини туториале, для начинающих изучать веб-разработку, описывается то, как сделать меню выбора (тег Select) пустым по умолчанию и скрыть пустой тег Option в меню выбора опций.

Если вам необходимо создать выпадающий список (тег select), у которого по умолчанию не выбрано ничего, то вам достаточно создать тег option и прописать ему атрибуты html selected disabled.

Если вы хотите, чтобы в вариантах выбора пустой option не было видно, самым оптимальным вариантом будет дописать тегу атрибут hidden.

Существует также способ скрытия пустого тега option в вариантах выбора с помощью css, для этого пропишите тегу option в стилях display:none;.

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

А сейчас я прощаюсь и желаю вам хорошего дня!

Источник

Пользовательские стили элементов select на CSS

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

Несколько свойств и методов, которые будет использовать наше решение:

clip-path для создания настраиваемой стрелки раскрывающегося списка

макет сетки CSS для выравнивания пользовательского поля выбора и стрелки

пользовательские переменные CSS для гибкого стиля

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

единицы em для относительных размеров

Распространенные проблемы с нативным select

Как и для всех типов полей формы, у select первоначальный вид в разных браузерах различается. Слева направо, вот исходный вид select в Firefox, Chrome и Safari:

Различия включают в себя размер поля, размер шрифта, высоту строки, и наиболее выдающейся является разница в стиле раскрывающегося индикатора. Наша цель — создать в этих браузерах одинаковый исходный вид, включая множественный выбор и отключенные состояния.

Примечание. Раскрывающийся список по-прежнему не стилизован, поэтому после select он все равно подберет для этого варианта список стилей отдельных браузеров . Это нормально — мы можем справиться с этим, чтобы сохранить доступность нативного select!

Базовый HTML

Для начала мы сосредоточимся на одиночном select.

Метка не является частью нашего упражнения, но включена в общем требовании, в частности, с атрибутом for, имеющим значение свойства id для select.

Чтобы реализовать наши пользовательские стили, мы для простоты в этом руководстве заключили пользовательский select в дополнительный div с классом select.

Сбросить и удалить унаследованные стили

Как и во всех моих руководствах в качестве передовой современной практики, мы сначала добавляем следующий сброс:

После этого мы можем начать правило для нативного select и применить следующее к его внешнему виду:

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

Примечание: CodePen настроен на использование автопрефикса, который добавит необходимые предварительно фиксированные версии свойства appearance. Возможно, вам придется специально настроить это для своего проекта или добавить их вручную. Мой HTML / Sass Jumpstart включает автопрефиксатор, как часть производственной сборки.

Хорошая новость в том, что мы можем добавить еще одно правило, чтобы убрать стрелку для более ранних версий IE, если вам это нужно:

Последняя часть — удалить значение по умолчанию outline. Не волнуйтесь — позже мы добавим ему замену для состояния :focus!

А вот гифка нашего прогресса. Вы можете видеть, что теперь нет визуальной индикации того, что это select до того, как кликнуть по нему:

Пользовательские стили поля выбора

Сначала давайте настроим некоторые переменные CSS. Это позволит гибко перекрашивать наш select, чтобы отображать состояние ошибки.

Примечание для специальных возможностей: как элемент пользовательского интерфейса выделенная граница должна иметь контраст 3:1 или выше по сравнению с цветом окружающего пространства.

Теперь пришло время создать стили select, которые мы применим к нашей оболочке div.select:

Сначала мы устанавливаем некоторые ограничения по ширине. Значения min-width и max-width в основном предназначены для этой демонстрации, и вы можете отказаться от них или изменить их для своего варианта использования.

Затем мы применяем некоторые свойства блочной модели, в том числе border, border-radius и padding. Обратите внимание на использование единицы em, которая будет сохранять эти свойства пропорциональными набору font-size.

В сбросе стилей, мы установили для нескольких свойств inherit, так что здесь мы определяем их, в том числе font-size, cursor и line-height.

Наконец, мы предоставляем свойства фона, включая градиент для малейшего размера. Если вы удалите свойства фона, выделение станет прозрачным и сохранит фон страницы. Это может быть желательно, однако помните о влияние на контраст и проверяйте его. И вот наш прогресс:

Пользовательская стрелка раскрывающегося списка выбора

Для нашей стрелки раскрывающегося списка, мы будем использовать одно из самых интересных современных свойств CSS: clip-path.

Обрезка контуров позволяет нам создавать всевозможные формы, «обрезая» квадратные и прямоугольные фигуры, которые мы получаем по умолчанию от большинства элементов. Я получил удовольствие от использования clip-path при моем недавнем редизайне сайта-портфолио.

До получения лучшей поддержки clip-path альтернативные методы включали:

background-image — обычно в формате PNG, более современным будет SVG

встроенный SVG как дополнительный элемент

трюк границы, чтобы создать треугольник

SVG может показаться оптимальным решением, однако при использовании в background-image в качестве иконки он теряет способность действовать как иконка в том смысле, что не может изменять свои свойства, такие как цвет заливки, без его полного переопределения. Это означает, что мы не можем использовать переменную CSS.

Размещение встроенного SVG-файла решает проблему с цветом, однако это означает добавление еще одного элемента каждый раз, когда определяется select.

С помощью clip-path мы получаем четкую, масштабируемую «графику» стрелки, которая выглядит как SVG, но с преимуществами возможности использовать пользовательскую переменную и определения через стили вместо разметки HTML. Чтобы создать стрелку, мы определим ее как псевдо-элемент ::after.

Источник