Изменить фон тега select в зависимости от выбраного варианта? [дубликат]
Только чистым CSS-ом никак, можно с небольшим куском JS:
Отслеживать
ответ дан 6 фев 2019 в 12:45
Nikita Rogatnev Nikita Rogatnev
1,663 9 9 серебряных знаков 30 30 бронзовых знаков
А можно добавить фон только для выбраного результата без выпадающего списка?(Не option , а select где отображается результат )
6 фев 2019 в 12:57
@E_K измените цвет для option на белый, а в обработчике замените в конце style.backgroundColor на value .
6 фев 2019 в 13:59
- html
- css
-
Важное на Мете
Связанные
Похожие
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как изменить фон выбранной опции select css
I have a select box and I’m trying to change the background color of the options when the select box has been clicked and shows all the options.
10 Answers 10
Help us improve our answers.
Are the answers below sorted in a way that puts the best answer at or near the top?
You need to put background-color on the option tag and not the select tag.
If you want to style each one of the option tags.. use the css attribute selector:
I don’t know if you’ve considered it or not but if your application is based on coloring various groupings of items you should probably use the tag coupled with a class for further referencing. For example:
and then in the head of your document write the css like this:
Yes, you can set this by the opposite way:
Check it working bellow:
Similar to some of the answers, but not really stated, is to add a class to the actual option tag and use css classes. this is currently working for me without issue on IE (see above ss).
Another option is to use Javascript:
(Not as clean as the CSS attribute selector, but more powerful)
My selects would not color the background until I added !important to the style.
If you really want to style the within a , consider switching to a Javascript/CSS based drop down such as http://getbootstrap.com/2.3.2/components.html#dropdowns or https://silviomoreto.github.io/bootstrap-select/examples/. This because browsers such as IE do not allow styling of options within elements. Chrome/OSX also has this problem — you cannot style options.
However a warning is attached to that approach. These types of menus work very differently on mobile platforms because native elements aren’t used. They can have annoying quirks on desktop as well. My advice is 1) don’t write your own and 2) find a library that’s been really well tested.
HTML выбранная опция цвет фона CSS
Когда я выбираю параметр, он становится синим, я хочу переопределить это и сделать его другим цветом. В стиле я ожидал что-то вроде «выбранного цвета», но его не существует.
10 ответов
Возможно, вы не сможете сделать это с помощью чистого CSS. Но немного JavaScript может сделать это приятно.
Грубый способ сделать это —
Мы можем переопределить синий цвет на наш собственный цвет. Он работает для Internet Explorer, Firefox и Chrome:
Используя это ниже следующий CSS:
В принципе, вы можете стилизовать его, используя option [selected] в качестве селектора, но это не работает во многих браузерах. Кроме того, это позволяет только стилизовать выбранный параметр, а не параметр, который имеет фокус при наведении.
Протестировано для работы в Chrome 9 и Firefox 3.6, не работает в Internet Explorer 8.
ВЫБРАТЬ ВАРИАНТ: проверено
В настоящее время CSS не поддерживает эту функцию.
Вы можете создать свой собственный или использовать плагин, который имитирует это поведение, используя DIVs / CSS.
Этот синтаксис будет работать в XHTML и не работает в IE6, но это не-JavaScript-способ:
Если вы хотите сделать это на лету, то вам придется использовать javascript, как предлагали другие .
Вы не можете полагаться на CSS для элементов формы. Результаты сильно различаются во всех браузерах. Я не думаю, что Safari позволяет настраивать любые элементы формы вообще.
Лучше всего использовать такой плагин, как jqTransform (использует jQuery).
РЕДАКТИРОВАТЬ: эта страница, кажется, не работает в данный момент. Также есть пользовательские элементы форм, которые поддерживают MooTools и могут поддерживать jQuery в будущем.
Я думаю, что решение, которое вы, возможно, искали:
Протестировал его в FF, Opera, Konqueror работал нормально .
Я понимаю, что это старый пост, но в случае, если он поможет, вы можете применить этот CSS, чтобы IE11 рисовал пунктирный контур для индикации фокуса элемента , чтобы он напоминал индикацию фокуса в Firefox: select: focus :: — ms-value
Как изменить цвет фона опции select box?
у меня есть поле выбора, и я пытаюсь изменить цвет фона параметров, когда поле выбора было нажато и показывает все параметры.
HTML-код
в CSS
10 ответов
нужно поставить background-color на option — тег, а не тег select тег.
если вы хотите, чтобы стиль каждого option теги.. используйте css attribute селектор:
Я не знаю, рассматривали ли вы это или нет, но если ваше приложение основано на окраске различных групп элементов, вы, вероятно, должны использовать тег в сочетании с классом для дальнейшей привязки. Например:
и затем в голове вашего документа напишите css следующим образом:
Да, вы можете установить это противоположным способом, используя это,
проверить это демо jsFiddle
HTML-код
в CSS
подобно некоторым ответам, но на самом деле не указано, чтобы добавить класс к фактическому тегу опции и использовать классы css. в настоящее время это работает для меня без проблем в IE (см. выше ss).
Если вы действительно хотите создать стиль внутри a, подумайте о переключении на JavaScript / CSS, напримерhttp://getbootstrap.com/2.3.2/components.html#dropdowns или https://silviomoreto.github.io/bootstrap-select/examples/. Это потому, что браузеры, такие как IE не допускайте стилизации параметров в элементах. Chrome / OSX также имеет эту проблему — вы не можете стилизовать параметры.
однако к этому подходу прилагается предупреждение. Эти типы меню работают очень по-разному на мобильных платформах, потому что собственные элементы не используются. Они могут иметь раздражающие причуды на рабочем столе, а также. Мой совет: 1) Не пишите свои собственные и 2) Найдите библиотеку, которая была действительно хорошо протестирована.
стиль фона выбранной опции
Я хочу изменить цвет фона для выбранного параметра. Он по умолчанию имеет синий цвет, но я хочу изменить его, а также цвет текста. После некоторого поиска я обнаружил, что css для выбранной опции является опцией: checked. Итак, я попробовал это:
Но, похоже, это ничего не делает, и фон остается синим, а цвет текста остается белым. Как я могу изменить эти цвета?
Кроме того, я хочу изменить фон/цвет, когда выбранная опция неаккуратная (сейчас она по умолчанию имеет серый фон, который довольно уродливый imo)
Похожие публикации:
- Как сделать картинки по центру в css
- Как сделать картинку черно белой css
- Как сделать кнопку по центру css
- Как сделать круг вокруг иконки css
Как изменить фон выбранной опции select css
Поле выбора значения из раскрывающегося списка.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
Обновлено 1 ноября 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Элемент используется, когда нужно показать выпадающий список.
Пример
Скопировать ссылку «Пример» Скопировано
form> label for="city-select">Ваш городlabel> select name="city" id="city-select"> option value="">-- Выберите город --option> option value="petersburg">Санкт-Петербургoption> option value="samara">Самараoption> option value="perm">Пермьoption> option value="novosibirsk">Новосибирскoption> select> form>
Подробно
Скопировать ссылку «Подробно» Скопировано
В примере выше показано типовое использование элемента . Это своего рода обёртка над списком опций, которые задаются тегом . Чтобы иметь возможность отправить выбранное значение на сервер, необходимо выполнить несколько условий:
- задать тегу атрибут name ;
- задать каждому тегу атрибут value . Если этот атрибут не задан, то его значение будет равно текстовому содержимому тега .
Если нужно, чтобы изначально был выбран какой-то элемент из списка, нужно задать соответствующему тегу атрибут selected .
Внутри тега могут использоваться только теги и .
Атрибуты
Скопировать ссылку «Атрибуты» Скопировано
Тег используется совместно с несколькими специфическими, а так же с большинством атрибутов для элементов форм.
autocomplete
Скопировать ссылку «autocomplete» Скопировано
Разрешает автозаполнение. Автозаполнение — это когда браузер предлагает сохранить, например, выбранный город, чтобы данные подставлялись при следующем входе.
autofocus
Скопировать ссылку «autofocus» Скопировано
Атрибут булевого типа (без значения, либо атрибут есть в теге, либо его нет совсем). Если он указан, то при загрузке страницы фокус будет автоматически помещён на наш выпадающий список.
disabled
Скопировать ссылку «disabled» Скопировано
Атрибут булевого типа. Если задан, то выпадающий список отключается для взаимодействия с пользователем. Если атрибут не задан, то он может быть унаследован у одного из предков (например у контейнера или . Если ни у одного предка вверх по дереву этот атрибут не задан, то выпадающий список доступен для взаимодействия.
form
Скопировать ссылку «form» Скопировано
Атрибут указывает на элемент , с которым связан выпадающий список. Значением атрибута должен быть id формы в пределах текущего документа. Если атрибут не задан, то обязательно должен находиться внутри тега . Но если задать атрибут, то нахождение внутри формы не обязательно и может находиться в любом месте страницы.
multiple
Скопировать ссылку «multiple» Скопировано
Атрибут булевого типа. Включает возможность выбора сразу нескольких пунктов списка. Если атрибут задан, то внешний вид списка поменяется с однострочного на многострочный с возможностью скроллинга.
name
Скопировать ссылку «name» Скопировано
Имя выпадающего списка. При отправке формы значение атрибута name будет ключом в отправляемом объекте.
required
Скопировать ссылку «required» Скопировано
Атрибут булевого типа. Указывает, должен ли обязательно быть выбран какой-то пункт выпадающего списка, значение атрибута value которого — это не пустая строка. Атрибут учитывается при валидации формы при отправке. Если поле не заполнить, то при попытке отправки формы браузер покажет ошибку.
size
Скопировать ссылку «size» Скопировано
Числовой атрибут. Если включён атрибут multiple , то это число указывает на количество видимых пунктов списка.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Выбрать несколько элементов списка, когда включён атрибут multiple , можно, используя клавиши Ctrl , Cmd и Shift . Клавиши Ctrl (Windows, Linux) и Cmd (Mac OS) работают одинаково. Мы зажимаем эту клавишу на клавиатуре, а затем кликаем мышкой в нужные пункты списка. Этим способом можно выбрать несколько пунктов, находящихся на разном расстоянии друг от друга. Если выбрать пункт списка, зажать клавишу Shift и выбрать любой другой, то будут выбраны последовательно все пункты списка между этими двумя.
На практике
Скопировать ссылку «На практике» Скопировано
Денис Ежков советует
Скопировать ссылку «Денис Ежков советует» Скопировано
�� Выпадающий список — это один из элементов формы, почти не поддающийся стилизации. Мы можем немного изменить внешний вид самого элемента , но стилизовать выпадающий список опций можно не для всех браузеров. Многие дизайнеры любят рисовать нестандартные выпадающие списки в угоду красоте, но реализация таких списков очень трудоёмка на чистом HTML и CSS. Рекомендуется для выпадающих списков оставлять родной вид, потому что такие списки обладают рядом преимуществ перед нестандартными. Например, выпадающий список опций может выходить за границы окна браузера, давая пользователю возможность выбрать нужный элемент.
�� Несмотря на вышесказанное, немного стилизовать выпадающий список всё же можно. Вот как можно изменить вид стрелочки:
form> label for="city-select">Нестандартная стрелочкаlabel> div class="select-wrapper"> select name="city" id="city-select"> option selected disabled>-- Выберите город --option> option value="petersburg">Санкт-Петербургoption> option value="moscow">Москваoption> option value="kazan">Казаньoption> option value="samara">Самараoption> option value="perm">Пермьoption> option value="novosibirsk">Новосибирскoption> select> div> form>
В данном случае мы оборачиваем наш дополнительным блоком, чтобы задействовать псевдоэлемент : : after этого блока. К сожалению, относится к такому типу элементов, у которых нет своих псевдоэлементов : : before и : : after .
.select-wrapper position: relative;> .select-wrapper::after content: "⬇️"; position: absolute; right: 0; margin-top: -2px; pointer-events: none;> select appearance: none; width: 200px; padding: 4px; border-color: #aaa; border-radius: 3px;>.select-wrapper position: relative; > .select-wrapper::after content: "⬇️"; position: absolute; right: 0; margin-top: -2px; pointer-events: none; > select appearance: none; width: 200px; padding: 4px; border-color: #aaa; border-radius: 3px; >
Используем свойство appearance , чтобы отключить браузерную стрелку справа. В качестве стрелки ставим псевдоэлемент : : after от родительского блока. Не забываем про позиционирование, а также отключаем у псевдоэлемента взаимодействие с мышкой, иначе при клике на него выпадающий список раскрываться не будет.
CSS :has() селектор
Также я веду телеграм канал “Frontend по-флотски”, где рассказываю про интересные вещи из мира разработки интерфейсов.
Вступление
Вы когда-нибудь задумывались о селекторе CSS, где вы проверяете, существует ли конкретный элемент внутри родителя? Например, если у компонента карточки есть миниатюра, нам нужно добавить к нему display: flex. Это было невозможно в CSS, но теперь у нас будет новый селектор CSS :has, который поможет нам выбрать родителя определенного элемента и многое другое.
В этой статье я объясню проблему, которую решает :has, как он работает, где и как мы можем его использовать с некоторыми вариантами использования и примерами, и, самое главное, как мы можем использовать его уже сегодня.
Проблема
Возможность стилизовать родительский элемент отсутствует. Мы должны создавать классы CSS и переключать их в зависимости от того, что нам нужно.
Рассмотрим следующий базовый пример.
У нас есть компонент карточки в двух вариациях: 1) С изображением 2) Без изображения. В CSS мы могли бы сделать что-то вроде этого:
/* A card with an image */ .card < display: flex; align-items: center; gap: 1rem; >/* A card without an image */ .card--plain
Как вы видели выше, мы создали класс специально для карточки без изображения, поскольку нам не нужен display: flex на родительском элементе. Вопрос в том, можем ли мы это сделать в CSS, без второго класса?
Ну, вот где CSS :has приходит на помощь. Это может помочь нам проверить, есть ли у элемента .card изображение .card__image или нет.
Например, мы можем проверить, есть ли у карточки изображение, и если да, то нам нужно применить flexbox.
.card:has(.card__image)
Знакомство с :has селектором
Согласно спецификации CSS, селектор :has проверяет, содержит ли родитель хотя бы один конкретный элемент или выполняется ли условие, например, если инпут сфокусирован.
Вернемся к предыдущему фрагменту кода.
.card:has(.card__image)
Мы проверяем, содержит ли родительский элемент .card дочерний элемент .card__image . Рассмотрим следующий рисунок:
Проще говоря, приведенный выше CSS эквивалентен следующему: «Есть ли в карточке элемент .card__image ?»
Разве это не восхитительно? В CSS есть логика!
Селектор :has не только про родителя
Речь идет не только о проверке того, содержит ли родитель дочерний элемент, но мы также можем проверить, следует ли за элементом, например,
. Рассмотрим следующее:
.card h2:has(+ p)
Это проверяет, следует ли непосредственно за
. Или мы можем использовать его с элементом формы, например, чтобы проверить, есть ли сфокусированный инпут.
form:has(input:focused)
Поддержка браузерами
На момент написания статьи CSS :has работал в Safari 15.4 и в Chrome Canary. Следите за поддержкой на Can I use.
Можем ли мы использовать это внутри @supports?
@supports selector(:has(*)) < /* do something */ >Хватит теории, давайте перейдем к примерам использования!
Примеры использования CSS :has
Заголовок раздела
Когда я работаю над заголовком раздела, у меня в основном будет два варианта: один только с заголовком, а другой содержит и заголовок, и якорную ссылку.
В зависимости от того, есть ли ссылка или нет, я хочу оформить его по-разному.
Latest articles
.section-header < display: flex; justify-content: space-between; >/* If there is a link, add the following */ .section-header:has(> a)
Компонент карточки, Пример 1
Вернемся немного назад к примеру с исходной картой. У нас есть два варианта, один с изображением, а другой без него.
.card:has(.card__image)
Мы даже можем проверить, нет ли на .card изображения, и применить определенные стили. В нашем случае это border-top .
.card:not(:has(.card__image))
Без :has нам пришлось бы иметь два класса, чтобы сделать это.
.card--default < display: flex; align-items: center; >.card--plain
Компонент карточки, Пример 2
В этом примере у нас есть два варианта набора действий у каждой карточки: одна карточка с одним элементом (ссылка), а другая с несколькими действиями (сохранить, поделиться и т. д.).
Когда действия карточки имеют две разные обёртки для действий, мы хотим активировать display: flex следующим образом (пожалуйста, не обращайте внимания на приведенную ниже разметку, она предназначена исключительно для демонстрационных целей!).
Like Save More 
