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

Question

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

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

Вот код:-

<html>
<head>
<title></title>

<style>
select { border:0; color:#EEE; background:transparent;
font-size:20px; font-weight:bold; padding:2px 10px; width:378px;
*width:350px; *background:#58B14C; -webkit-appearance: none; }

#mainselection { overflow:hidden; width:350px;
-moz-border-radius: 9px 9px 9px 9px;
-webkit-border-radius: 9px 9px 9px 9px;
border-radius: 9px 9px 9px 9px;
box-shadow: 1px 1px 11px #330033;
background: url("http://www.danielneumann.com/wp-content/uploads/2011/01/arrow.gif") no-repeat scroll 319px 5px #58B14C; 
}
</style>

</head>
<body>

    <div id="mainselection">
    <select>
    <option>Select an Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
    </select>
    </div>
</body>
</html>

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

75

css

Источник

user100238 15 окт '13 в 18:03

10 ответов

Другие вопросы по тегам css

user1455661 15 окт '13 в 18:22 2013-10-15 18:22 · Answer 1 · 2013-10-15 18:22

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

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

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

user37460 20 ноя '14 в 01:01 2014-11-20 01:01 · Answer 2 · 2014-11-20 01:01

Я полагаю, что вы ищете 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 {
  outline-color: red
}

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

user4055462 03 окт '14 в 15:49 2014-10-03 15:49 · Answer 3 · 2014-10-03 15:49

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

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

11

Источник

user4055462 03 окт '14 в 15:49

user2225803 22 янв '18 в 11:33 2018-01-22 11:33 · Answer 4 · 2018-01-22 11:33

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

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;
    }

user9397821 12 фев '19 в 16:12 2019-02-12 16:12 · Answer 5 · 2019-02-12 16:12

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

select:focus{
    border-color: gray;
    outline:none;
}

3

Источник

user9397821 12 фев '19 в 16:12

user1830605 17 фев '15 в 12:56 2015-02-17 12:56 · Answer 6 · 2015-02-17 12:56

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

select option:checked:after {
    content: attr(title);
    background: #666;
    color: #fff;
    position: absolute;
    width: 100%;
    left: 0;
    border: none;
}

user6364011 21 май '16 в 07:44 2016-05-21 07:44 · Answer 7 · 2016-05-21 07:44

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

select option {
  background: #f00; 
  color: #fff; 
  box-shadow: inset 20px 20px #f00
} 

select option:hover {
  color: #000; 
  box-shadow: inset 20px 20px #00f;
}

user10847019 18 июн '21 в 10:33 2021-06-18 10:33 · Answer 8 · 2021-06-18 10:33

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

      .dropdown .btn:focus{
    box-shadow: none;
}

0

Источник

user10847019 18 июн '21 в 10:33

user1334195 30 дек '18 в 04:34 2018-12-30 04:34 · Answer 9 · 2018-12-30 04:34

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

.dropdown-menu>.active>a {color:black; background-color:red;}
.dropdown-menu>.active>a:focus {color:black; background-color:red;}
.dropdown-menu>.active>a:hover {color:black; background-color:red;}

-2

Источник

user1334195 30 дек '18 в 04:34

user9331867 25 мар '18 в 02:23 2018-03-25 02:23 · Answer 10 · 2018-03-25 02:23

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

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

-2

Источник

user9331867 25 мар '18 в 02:23