Css изменить цвет выделения select

HTML выбранная опция цвет фона CSS

Когда я выбираю параметр, он становится синим, я хочу переопределить это и сделайте его другим цветом. В стиле я ожидал чего-то вроде «selected-color», но его не существует.

10 ответов

Возможно, вы не сможете сделать это, используя чистый CSS. Но, немного javascript может сделать это красиво.

Грубый способ сделать это —

var sel = document.getElementById('select_id'); sel.addEventListener('click', function(el) < var options = this.children; for(var i=0; i < this.childElementCount; i++)< options[i].style.color = 'white'; >var selected = this.children[this.selectedIndex]; selected.style.color = 'red'; >, false); 

@J.Hendrix:J.Hendrix: что я разместил работы. Но лучше будет использовать библиотеки JS, чтобы они работали во всех браузерах. в настоящее время отлично работает в Chrome и Firefox на Linux.

Одно замечание: мне пришлось поместить этот фрагмент внутри $(document).ready() чтобы мой элемент управления отображался и присутствовал идентификатор элемента, поэтому sel не был null .

Я хочу сделать то же самое .. Я меняю цвет при наведении и на спал . jsfiddle.net/7m2sY/34 Но это не работает ..

 Protect my email; Show email on advert; ; 

Протестировал его в FF, Opera, Konqueror отлично справился.

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

Лучше всего использовать плагин, например jqTransform (использует jQuery).

EDIT: эта страница, похоже, не работает в данный момент. Существует также Custom Form Elements, который поддерживает MooTools и может поддерживать jQuery в будущем.

@ari: таких плагинов довольно много — сегодня я видел только два новых: swizec.com/code/styledButton и pixelmatrixdesign.com/uniform

Я думаю, что решение, которое вы, возможно, искали, это:

@Muhammed Мухаммед Это так. Но на самом деле вам нужно проверить версию браузера. Взгляните на: w3schools.com/cssref/sel_checked.asp

Этот синтаксис будет работать в XHTML и не работает в IE6, но это не-javascript-способ:

Если вы хотите сделать это «на лету», вам придется пойти с javascript, как предложили другие.

Источник

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

Как изменить синюю подсветку в этом раскрывающемся списке, пожалуйста? ссылка на демонстрацию окна выбора Я хотел бы изменить цвет выделения на серый, если это возможно.

 
 Select an Option Option 1 Option 2  

Возможный дубликат: stackoverflow.com/questions/1667086/ — person Guillaume Poussel &nbsp schedule 15.10.2013

возможный дубликат Изменить цвет фона параметра списка выбора при наведении — person George &nbsp schedule 15.10.2013

Я не думаю, что вы можете. Вы можете установить фон отдельных опций, но не выделение. Вы можете рассмотреть плагины jQuery, например. dev7studios.com/dropit — person Yuriy Galanter &nbsp schedule 15.10.2013

Пожалуйста, обратитесь к этой [ссылке] stackoverflow.com/questions/6931129/change -цвет выделения — person sbsekar &nbsp schedule 15.10.2013

Ответы (10)

Да, вы можете изменить фон select , но вы не сможете изменить цвет выделения (при наведении курсора) с помощью CSS!

1. Является ли преобразование select в ul, li вид выбора и делать с этим все, что вы хотите.
2. Используйте такие библиотеки, как Choosen, Select2 или JQuery Form Styler . Это позволяет вам стилизовать гораздо более широко и кросс-браузерно.

Select2 довольно приличный, использует UX ОС, но не переусердствует с сумасшедшими стилизованными селекторами, которые люди просто не знают, как использовать . но нет +1, потому что он на самом деле не отвечает на вопрос, заданный OP . — person Piotr Kula; 11.08.2015

Я полагаю, что вы ищете свойство CSS outline (в сочетании с атрибутами active и hover psuedo):

/* turn it off completely */ select:active, select:hover < outline: none >/* make it red instead (with with same width and style) */ select:active, select:hover

Полная информация о контуре, цвете контура, стиле контура и ширине контура https://developer.mozilla.org/en-US/docs/Web/CSS/outline

Это вообще не отвечает на вопрос — ОП хочет заменить синюю подсветку браузера по умолчанию другим цветом. — person Luke; 30.05.2020

Только что нашел это, пока искал решение. Я тестировал только FF 32.0.3.

box-shadow: 0 0 10px 100px #fff inset; 

select option:hover < box-shadow: 0 0 10px 10px #e1358f inset; >работает, но только в FF и только когда ваша мышь остается на элементе, он становится синим в тот момент, когда вы уходите от поля выбора, пока оно все еще открыто. — person Anima-t3d; 29.12.2014

@ Anima-t3d спасибо, я знаком с select2, но я просто пытался ограничить использование количества плагинов. — person CPHPython; 21.05.2018

Стилизация собственного элемента select очень сложна, я думаю, что использование плагина для этого является одним из наиболее распространенных вариантов использования. — person Anima-t3d; 21.05.2018

попробуйте это .. Я знаю, что это старый пост, но он может кому-то помочь

select option:hover, select option:focus, select option:active < background: linear-gradient(#000000, #000000); background-color: #000000 !important; /* for IE */ color: #ffed00 !important; >select option:checked < background: linear-gradient(#d6d6d6, #d6d6d6); background-color: #d6d6d6 !important; /* for IE */ color: #000000 !important; >

Он стилизует только фон отмеченной опции, не работает при наведении. Но в любом случае это полезно. — person Olga; 29.03.2018

Когда мы нажимаем на «входной» элемент, он «сосредотачивается». Удаление синего маркера для этого действия «фокус» так же просто, как показано ниже. Чтобы придать ему серый цвет, вы можете определить серую границу.

Да, он меняет цвет границы, когда выделение сфокусировано. Однако тень блока также должна быть перезаписана: ‘box-shadow: 0 0 2px grey;’ для полного удаления синего цвета. — person JCdotNET; 26.09.2019

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

Это работает для Firefox и Chrome, изящно возвращается к системному цвету в IE. Просто не забудьте установить для свойства title содержимое параметра. Это позволяет вам установить цвета фона и переднего плана.

select option:checked:after

Это супер хакерский, но он делает именно то, что я хотел. Спасибо 🙂 (К вашему сведению, работает и с Electron) — person ShaneTheKing; 17.06.2017

Не работает в chrome 63 или firefox 57. А псевдоэлементы используют два двоеточия? — person Alexander; 19.12.2017

Источник

How to Change the Selected Option Color using CSS?

In Html, a select dropdown is generally used in forms to collect input from the user. The dropdown can have one to many options as a dropdown list and the user can select any option according to his preference.

By default, the styles applied to the selected option such as color, background color, etc are same as the styles applied to un-selected options of the dropdown.

But, in some cases, we want to style the selected option differently so that the user could distinguish between the selected and un-selected options.

In CSS, if you want to change the selected option’s color or any other style, you can use the :checked pseudo-class selector. The :checked selector targets only the selected(checked) option of the dropdown.

Let’s say we have the following dropdown in our HTML document. By default, we have kept the Bootstrap option selected by adding the selected=»true» attribute.

 HTML CSS JavaScript Bootstrap Python Java Node.js Angular 

Now, if we want to apply CSS styles only to the selected option of the dropdown, we have to use the :checked selector on the element i.e. option:checked

/*Apply styles to selected option*/ option:checked

Below is the outcome of the above code:

Apply Styles to the Default Selected Option of the Dropdown

A select dropdown can also have a default selected option. If the user does not select any option from the dropdown, the default selected option is used by the form.

To make a dropdown option selected by default, we add the selected=»true» attribute in that option. Here, true means that the option will be selected by default.

If you want to apply CSS styles to this default selected option, you can use the :default pseudo-class selector. The :default selector allows you to apply styles to those inputs which are selected by default.

Let’s say we have the following dropdown in our HTML file. We have made the «CSS» option of the dropdown selected by default. This is done by adding the selected=»true» attribute to it.

 HTML CSS JavaScript Bootstrap Python Java Node.js Angular 

Now, we want to apply yellow background color and italic font style to this default selected option so that the user could distinguish between the default selected option and normal options.

To do that we have to use the :default selector with the select option:

/*Apply styles to default selected option*/ option:default

This will give you the following output:

Live Demo

You can use the following try it now example to run the code in our online html editor.

Example:

Conclusion

In this article, we learned how we can change the selected option color of a select dropdown using CSS. We also learned to apply styles to the default selected option of a dropdown with CSS.

To change the selected option color of a dropdown, we use the :checked selector with the select option. The :checked selector only targets the currently selected option of the dropdown.

Also, to change the default selected option color, we use the :default selector with the select option. The :default selector targets only that option which is selected by default using the selected=»true» attribute.

Related posts:

Источник

Как изменить цвет синего выделения в выпадающем списке

Как мне изменить синюю подсветку в этом выпадающем списке, пожалуйста?

      
 Select an Option Option 1 Option 2  
   

Я хотел бы изменить цвет подсветки на серый, если это возможно.

10 ответов

Да, вы можете изменить фон select но вы не сможете изменить цвет подсветки (при наведении курсора) с помощью CSS!

У вас есть несколько вариантов:

1. Это конвертировать select в ul, li вид выбрать и делать все, что вы хотите с этим.
2. Используйте библиотеки, такие как Choosen, Select2 или jQuery Form Styler. Это позволяет вам создавать более широкий и кросс-браузерный стиль.

Я полагаю, что вы ищете outline Свойство CSS (в сочетании с атрибутами active и hover psuedo):

/* turn it off completely */ select:active, select:hover < outline: none >/* make it red instead (with with same width and style) */ select:active, select:hover

Полная информация о структуре, цвете контура, стиле контура и ширине контура https://developer.mozilla.org/en-US/docs/Web/CSS/outline

Просто нашел это, пока искал решение. Я только что проверил это FF 32.0.3

box-shadow: 0 0 10px 100px #fff inset; 

Попробуйте это.. Я знаю, что это старый пост, но это может кому-то помочь

select option:hover, select option:focus, select option:active < background: linear-gradient(#000000, #000000); background-color: #000000 !important; /* for IE */ color: #ffed00 !important; >select option:checked < background: linear-gradient(#d6d6d6, #d6d6d6); background-color: #d6d6d6 !important; /* for IE */ color: #000000 !important; >

Когда мы нажимаем на элемент «input», он «фокусируется» на. Удаление синего маркера для этого действия «фокус» так же просто, как показано ниже. Чтобы придать ему серый цвет, вы можете определить серую рамку.

Это работает для Firefox и Chrome, изящно возвращается к цвету системы в IE. Просто убедитесь, что для свойства title указано содержание опции. Позволяет установить цвета фона и переднего плана.

select option:checked:after

Чтобы стилизовать цвет при наведении и избежать использования цвета по умолчанию для ОС в Firefox, необходимо добавить тень блока как для опции выбора, так и для опции выбора: объявления при наведении курсора, установив цвет тени блока на «опции выбора» для цвет фона меню.

select option < background: #f00; color: #fff; box-shadow: inset 20px 20px #f00 >select option:hover

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

Добавьте это в свой код CSS и измените красный цвет фона на цвет по вашему выбору:

.dropdown-menu>.active>a .dropdown-menu>.active>a:focus .dropdown-menu>.active>a:hover

Я только что нашел этот сайт, который дает классные темы для окна выбора http://gregfranko.com/jquery.selectBoxIt.js/

и вы можете попробовать эту тему, если ваша проблема с общим видом синий — желтый — серый

Источник