发表新帖
发表新帖

Change IE background color on unopened, focused select box

后端 未结
关注
4 1170
感情败类
感情败类 2020-12-20 11:20

I\'d like to change the blue background color from IE when a drop down is focused, but I can\'t seem to find any CSS to do this.
提交评论
  •  加载中...
  • 無奈伤痛
    2020-12-20 12:06

    Appreciate this is an oldish question, but to prevent the blue background on a selected option in a select dropdown in IE, use the MS pseudo element -ms-value as mentioned by WillRice above. Importantly though you need to set a color css attribute as well for the text as this will get defaulted to white.

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

    More info here

    0 讨论(0)
  • 别跟我提以往
    2020-12-20 12:07

    In Internet Explorer 11/Edge (not sure about previous versions) you can do this:

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

    You should also specify the font color because it otherwise defaults to white (to originally contrast against the blue), so you'll want to override it too.

    Here's a dabblet demo

    0 讨论(0)
  • 情书的邮戳
    2020-12-20 12:20

    I've been fiddling around with css and javascript and have searched the internet to find a solution. Unfortunately it looks like it's not possible to change IE's blue highlight itself. In the following example I've used a combination of CSS an JS to achieve nearly the same result in ie as you have on http://jsfiddle.net/TafDD/3/ . Have a look at it.

    An example is worth a thousand words: (tested in 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>


    I hope this helps you.

    I also recommend you have a look at:

    • jQuery.customSelect()
    • Style a Select Box Using Only CSS
    • DropKick.js
    • Custom Style All Your Form Elements with Pure CSS and No JavaScript

    …and an overview of 40 Techniques:

    • Form Elements: 40+ CSS/JS Styling and Functionality Techniques

    These sites will give you information on how to further style the select with css and / or javascript.

    Have fun reading and happy coding!

    0 讨论(0)
    •  看不清?
    提交回复
    热议问题