20

ドロップダウンがフォーカスされているときに 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/

4

4 に答える 4

2

以下の CSS を使用しており、最新の IE11、Edge、Firefox、および Chrome で動作しています (以前のブラウザーではテストしていません)。必要ない場合は、border-radius と padding を削除してください。そして、貢献してくれた willrice に感謝します。

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;
}
于 2016-02-18T12:32:29.590 に答える
-3

私はcssとjavascriptをいじっていて、インターネットを検索して解決策を見つけました。残念ながら、IE の青いハイライト自体を変更することはできないようです。次の例では、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 のテクニックの概要:

これらのサイトは、css や javascript を使用して選択をさらにスタイル設定する方法についての情報を提供します。

読書を楽しみ、コーディングを楽しんでください！

于 2013-07-10T21:39:12.843 に答える