- ベストアンサー
IE6でプルダウンメニューをクリックすると色が変わらない問題について
- IE6でプルダウンメニューをクリックすると色が変わらない問題について解説します。
- IE8でプルダウンメニューをクリックするとすぐに閉じてしまう問題についても解説します。
- IEのバグの可能性や他の解決方法についても考察しています。
- kei216
- お礼率80% (4/5)
- JavaScript
- 回答数4
- ありがとう数6
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
#2, 3です。 よく考えたら、:focus擬似クラスを使えばいいだけですね…。 (※以下、全角空白を半角空白に置換してください) --------- <style type="text/css"><!-- #Test select:focus { background-color: yellow; } --></style> <body> <form id="Test"> <p> <select name="color"> <option>white</option> <option>red</option> <option>green</option> <option>blue</option> </select> </p> </form> --------- IE8 で :focus擬似クラス が機能することを確認しました。 #2 のリンク先にもこの方法は書かれていました。失礼しました。
その他の回答 (3)
- think49
- ベストアンサー率59% (285/482)
#2 です。 多分、focus はキーボード操作派への配慮なのだと思いますが。IE8 は無理そうなのでIEとモダンブラウザで処理を分けてみてはどうでしょう？ (※以下、全角空白を半角空白に置換してください) ---------- <style type="text/css"><!-- select.focus { color: black; background-color: yellow; } --></style> </head> <body> <form id="Test"> <p> <select name="color"> <option>white</option> <option>red</option> <option>green</option> <option>blue</option> </select> </p> </form> <script type="text/javascript"><!-- (function (focusListener, blurListener) { var select = document.getElementById('Test').elements['color']; if (select.addEventListener) { select.addEventListener('focus', focusListener, false); select.addEventListener('blur', blurListener, false); } else if (select.attachEvent) { select.attachEvent('onmouseover', focusListener, false); select.attachEvent('onblur', blurListener, false); } })(function (event) { var select = event.target || event.srcElement; select.className += select.className ? ' focus' : 'focus'; }, function (event) { var select = event.target || event.srcElement; select.className = (' ' + select.className + ' ').replace(/ focus /g, ''); }); //--></script> ----------
お礼
回答ありがとうございます。 やはりIE8では無理そうですね。 IEのみの閉じた環境ですのでIEのみでも対応できたらなと思っていました。 何度もありがとうございます。
- think49
- ベストアンサー率59% (285/482)
「select要素で onfocusイベントハンドラ が適切には働かない」というIE8特有のバグのようです。 下記URLではonmouseover属性で回避するコードが紹介されています。 Why does select with onfocus not work in IE? - Stack Overflow http://stackoverflow.com/questions/1763113/why-does-select-with-onfocus-not-work-in-ie Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS) http://jsfiddle.net/axQTJ/1/ (※以下、全角空白を半角空白に置換してください) -------- <form id="Test"> <p> <select name="color" onmouseover="this.style.backgroundColor='yellow';" onblur="this.style.backgroundColor='white';"> <option>white</option> <option>red</option> <option>green</option> <option>blue</option> </select> </p> </form> --------
お礼
回答ありがとうございます。 この方法を試してみましたが、 onmouseoverではマウスが通過しただけで色が変わってしまうという現象がありますので、 この方法はやめておきます。
- zeff
- ベストアンサー率69% (137/198)
onmousedownならOKのようです。 <select onmousedown="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'">
お礼
回答ありがとうございます。 マウスを押された時のみで カーソルがキーボードで操作された時は色がかわらないので この方法はやめておきます。
お礼
ありがとうございます。 CSSの知識が乏しく理解できてませんでした。 javascriptではありませんが、やりたいことはできました。 この回答を締め切らせていただきます。