DropDownListのJavascriptの記述について

環境/言語:[C# ]
分類:[ASP.NET]

DropDownListコントロールにOnfocusイベントを追加し、
フォーカスが当たったらDropDownListの背景色を変えております。

以下のように行っております。
Onfocus="this.style.backgroundColor='#FF0000';"

この設定を行い、実際に起動しこのコントロールをマウスでクリックすると
確かに背景色は変わりますが、設定をしていなかった時の動作
（リストが表示される）が行われなくなりました。
その為、再度クリックしないとリストが表示されません。

背景色も変わり更にリストが表示されるようにするにはどうすればよいでしょうか？

■No29404に返信(Makoさんの記事)
リストが表示されない現象をIE9で確認できました。使用されているブラウザはIEで
すか？

すでに背景に色がついているばあいは、リストが表示されました。onmouseoverで色
をつけるようにしてはいかがでしょうか。

■No29408に返信(もりおさんの記事)
> ■No29404に返信(Makoさんの記事)
> リストが表示されない現象をIE9で確認できました。使用されているブラウザはIEで
> すか？
>
> すでに背景に色がついているばあいは、リストが表示されました。onmouseoverで色
> をつけるようにしてはいかがでしょうか。

ブラウザはIEです。

フォーカスが当たったら背景色を変えるという仕様で、フォーカスが外れたら元の背景色に戻すこととなっています。
そのため、onmouseoverではダメですね

JavaScriptよりスタイルシートでやったほうが簡単ですよ

■No29412に返信(Miraさんの記事)

これだけで済んじゃうのですね。知りませんでした。

.input:focus {
  background-color:Red;
}

<asp:DropDownList ID="DropDownList1" runat="server" CssClass="input">
</asp:DropDownList>

■No29410に返信(Makoさんの記事)

JavaScriptでやれるだけやってみましたが、フォーカスが外れたときというのは
大丈夫なのですが、フォーカスが当たったタイミングで色を変えるという仕様は
満たせませんでした。Miraさんの案には敵いません。

<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
    $(window).load(function () {
        var DropDownList1 = $("#<%= DropDownList1.ClientID %>");
        var focused = false;
        DropDownList1.focus(function () {
            $(this).css("backgroundColor", "red");
            focused = true;
        });
        DropDownList1.blur(function () {
            $(this).css("backgroundColor", "");
            focused = false;
        });
        DropDownList1.mouseover(function () {
            $(this).css("backgroundColor", "red");
        });
        DropDownList1.mouseout(function () {
            if (!focused) {
                $(this).css("backgroundColor", "");
            }
        });
    });
</script>

<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList>