Изменение цвета фона IE на неоткрытом, сфокусированном поле выбора

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

<select id=focusSelect><option>Option</option></select>

JS:

document.getElementById("focusSelect").focus();

CSS:

select:focus{
    background-color: red;
}

http://jsfiddle.net/TafDD/3/

В частности, это происходит, когда раскрывающийся список не открыт. Стилизация вариантов не проблема.

Я также не могу найти окончательного ответа о том, можно ли вообще это сделать.

Установка цвета фона option также не очищает синий цвет.

option {
    background-color: green;
}

http://jsfiddle.net/srycroft/yE2Zg/

Ответ 1

В Internet Explorer 11/Edge (не уверен в предыдущих версиях) вы можете сделать это:

select:focus::-ms-value {
    color: black; 
    background: red;
}

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

Здесь демо-версия dabblet

Ответ 2

Оцените, что это старый вопрос, но для предотвращения синего фона по выбранному параметру в раскрывающемся списке выбора в IE используйте псевдо-элемент MS-значения MS, как указано выше в WillRice. Важно отметить, что вам нужно также установить атрибут color css для текста, так как это будет дефолт по умолчанию белым.

select::-ms-value {
    background: none; /* remove blue background on ie10/ie11 when selected*/
    color:#000;
}

Больше информации здесь

Ответ 3

Я использую CSS ниже, и он работает в последних версиях IE11, Edge, Firefox и Chrome (я не тестировал его с более ранними браузерами). Просто удалите border-radius и padding, если они вам не нужны. И благодаря волю за его вклад:

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  padding: 5px;
}

select:focus::-ms-value {
  background: white;
  color: black;
}

select::-ms-expand {
  display: none;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  padding: 5px;
}

Ответ 4

Я занимался css и javascript и искал в Интернете, чтобы найти решение. К сожалению, похоже, что невозможно изменить IE blue highlight. В следующем примере я использовал комбинацию CSS JS для достижения почти такого же результата, как и на http://jsfiddle.net/TafDD/3/. Посмотри на это.

Пример стоит тысячи слов: (проверено в IE7)

<!DOCTYPE html>
<html>
<head>
    <title>CSS Form Select Focus Color Change Test Page</title>
    <style type="text/css">
        /* Set the desired background color for the whole select element */
        form select {
            background-color: #fff;
        }

        form select option {
            background: transparent;
        }

        /* Set the desired color for the focus state */
        select:focus, select.focus {
            background-color: #f00;
            outline: none;
        }
    </style>
</head>
<body>

    <form action="" method="POST">
        <div id="selectWrap">
            <select id="focusSelect" name="test_select">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
        </div>
    </form>

    <!--[if lt IE 9]><script>
        // NOTE: This is a pure JavaScript variant. 
        // You could also use something like jQuery.

        var selectBox = document.getElementById('focusSelect');

        // This will add the .focus class to the select 
        // giving it the defined background color
        selectBox.onfocusin = function() {
            this.className = 'focus';
        };

        // and this will restore the original background 
        // color by removing the .focus class
        selectBox.onfocusout = function() {
            this.className = '';
        };

        // This removes the blue highlight after an option is selected
        selectBox.onchange = function() {
            this.blur();
        };
    </script><![endif]-->

</body>
</html>

Я надеюсь, это поможет вам.

Я также рекомендую вам взглянуть на:

... и обзор 40 методов:

Элементы формы: 40+ Методы стилизации и функциональности CSS/JS

Эти сайты предоставят вам информацию о том, как добавить стиль с помощью css и/или javascript.

Получайте удовольствие от чтения и счастливого кодирования!