IE6でプルダウンメニューをクリックすると色が変わらない問題について
- IE6でプルダウンメニューをクリックすると色が変わらない問題について解説します。
- IE8でプルダウンメニューをクリックするとすぐに閉じてしまう問題についても解説します。
- IEのバグの可能性や他の解決方法についても考察しています。
- ベストアンサー
IE6でプルダウンメニューをクリックするとその時に色が変わるようにして
IE6でプルダウンメニューをクリックするとその時に色が変わるようにしていたのですが、 IE8でプルダウンメニューをクリックするとすぐに閉じてしまいます。 2回目のクリックでメニューが表示されます。 これはIEのバグなのでしょうか？ また、他に良い方法あるのでしょうか？ 以下がサンプルソースです。 <HTML> <HEAD> <TITLE>サンプル１</TITLE> </HEAD> <BODY> <CENTER> <FORM name="testForm"> <SELECT onFocus="style.backgroundColor='yellow'" onblur="style.backgroundColor='white'"> <OPTION>white</OPTION> <OPTION>red</OPTION> <OPTION>green</OPTION> <OPTION>blue</OPTION> </SELECT> </FORM> </CENTER> </BODY> </HTML>
- 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'">
お礼
回答ありがとうございます。 マウスを押された時のみで カーソルがキーボードで操作された時は色がかわらないので この方法はやめておきます。
関連するQ&A
- プルダウンメニューの項目をクリックしてもリンク先に
<HTML> <HEAD> <TITLE>リンク先をプリダウンメニューで表示したい</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function linkMenu(m) { if(m==0)return; document.form01.url.selectedlndex = 0; if(m == 1) document.location="https://www.google.com/?hl=ja&gws_rd=ssl"; if(m == 2) document.location="http://www.yahoo.co.jp/"; } //--></SCRIPT> </HEAD> <BODY> <FORM NAME="form01"> <SELECT NAME="url" onChange="linkMenu(this.selectedlndex)"> <OPTION>クリックして選択してね <OPTION>e-support <OPTION>Office TAKASAKU </SELECT> </FORM> </BODY> </HTML> 以上ですが プルダウンメニューの項目をクリックしてもリンク先が開かないのですが！？ 何かミスがあるでしょうか！？ 宜しくお願いします。
- ベストアンサー
- JavaScript
- 入力フォームとプルダウンメニューに関して
入力フォームとプルダウンメニューを重ねて表示し、入力フォームを上部に表示したいのですが、自分で試してみるとプルダウンメニューが入力フォームの上部に表示されてしまいます。 入力フォームを上部に表示したいのですが、 やり方がわかりません。教えて下さい。 よろしくお願いします。 <html> <head> <title></title> //CSSの定義 <style type="text/css"> <!-- span{ position:relative; left:70px; } --> </style> </head> <body> <span> //入力フォーム <input type="text" name="input" size="10" maxlength="1"> </span> //プルダウンメニュー <select> <option></option> <option>あああ</option> <option>いいい</option> <option>ううう</option> <option>えええ</option> <option>おおお</option> </select> </body> </html>
- 締切済み
- HTML
- プルダウンメニュー
以下のプログラムですが！ 仕様が二分割の縦分割フレームが特徴です。 左側フレームにリンクタグがあり、そのリンクタグをクリックすると、右フレームに HPが観れるようになっています。 しかし、プルダウンメニューのYahooをクリックしたらakkotyan.html、は左フレームになぜか 出てきてしまって困っています。 それともう１つ、プルダウンメニューのhouyhnhnmsをクリックしても何もフレームに出てこなくて無反応です？ そのほか 「クリックで動くプログラ」と「知恵袋 竹島問題」はちゃんと右フレームに出てきて 問題ありません。 プルダウンメニュータグのHPを右フレームに出すにはどうしたらできますか！？ 宜しくお願いします。 -------------------------------------------------------- 左フレーム <html> <head> </head> <frameset cols="26%,*"> <frame src="left.html"name="menu"> <frame src="pronagare.html"name="contents"> </frameset> <html> ------------------------------------------------------- 右フレーム <html> <HTMl> <HEAD> <TITLE>プルダウンメニューのHPを右フレームへ表示したい</title> <script>addEventListener('load',function(ev){ document.forms['jump'].elements['to'].addEventListener('change',function(ew){ var map = { yahoo: './akkotyan.html', houyhnhnms: 'http://google.com/search?tbm=isch&q=houyhnhnms' }; var url = map[ew.target.value]; if (url) window.location = url; },false); },false)</script> <body> <form name=jump><select name=to> <option value='' selected>-</option> <option value=yahoo>Yahoo</option> <option value=houyhnhnms>Houyhnhnms</option> </form> </select> <P> <a href="pronagare.html"target="contents">クリックで動くプログラム</a><br> <a href="takesima.html"target="contents">知恵袋 竹島問題</a><br> </body> </html>
- ベストアンサー
- JavaScript
- プルダウンメニューの利用
htmlのプルダウンメニューを使用した値計算のインタフェースを作成したいと思っています。 プルダウンメニューに設定するメニュー項目に値を設定し、 onChangeを使用して、その値だけをPHPプログラムに渡すようにしたいのですが、 JavaScript部分をどのように書けばいいのか判りません。 どなたかご教授お願いいたします。 <form name="formtest" action="test.php" method="post"> <table> <tr> <th>カテゴリ*</th> <td> <SELECT NAME="iPlanet" onchange=""> <OPTION VALUE="9" selected>初期値 <OPTION VALUE="0">サンプル1 <OPTION VALUE="1">サンプル2 </SELECT> </td></tr> </table> </form> onchangeでValueの値をPHPに送りたいのです。 よろしくお願いします。
- ベストアンサー
- JavaScript
- プルダウンメニューの表示について
お世話になります。 ホームページを作成中ですが、文字の大中小に変更できるように設定したいです。 そこで見つけてきのはプルダウンメニューで、 <form name="puru"> <select name="amu" onchange="fontsize();"> <option>14pt</option> <option>12pt</option> <option selected>10pt</option> </select> </form> これを入れるというものですが、これだとプルダウンメニューの表示は10pt、12pt 14ptという表示に なってしまいます。これを利用して、プルダウンメニューの表示を大中小というふうにできないでしょうか？ 回答をお願いします。
- ベストアンサー
- JavaScript
- IE8互換表示：プルダウンの三角（▼）の大きさが…
Internet Explorer 8の互換表示時、HTMLのプルダウンメニュー（<select><option> ～ </option></select>）を複数表示した際、リストを展開するボタンの三角（▼）の大きさが、項目によっては通常よりやや小さめの大きさで描画されるという現象が発生しました。 プルダウンメニューのHTMLやスタイルを確認しましたが、特に何か設定しているわけでもありません。 これは、何か特別な条件を満たした場合に発生するような、IEの仕様なのでしょうか？ ＜補足＞ ちなみにOSはWindows XP、テーマはクラシックスタイルで当現象を確認しました。
- ベストアンサー
- HTML
- プルダウンのメニューを表示を2つ設定。
プルダウンのメニューを表示を2つ設定したいのですが、 どこが間違っているのでしょうか。 基本的にjsは、セレクタ名がかぶっていれば、機能しなくなります。 間違いをご指摘ください。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange() { var val1 = document.forms.form1.Select1.value; var target = document.getElementById("output"); if (val1 == "要素1") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value1 == "要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output"></div> </body> </body> <script language="javascript" type="text/javascript"> function selectboxChange11() { var val11 = document.forms.form11.Select11.value; var target = document.getElementById("output11"); if (val11 == "要素11") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form11" action=""> <select id="Select11" onchange="selectboxChange11();"> <option>---</option> <option value11 == "要素11">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output11"></div> </body> </body> </html>
- ベストアンサー
- JavaScript
- プルダウンを2個選び、その結果に基づき、値を返す。
プルダウンを2個選び、その結果に基づき、値を返したいです。 以下はそのhtml文です。 <!DOCTYPE html> <html> <head> <title>プルダウンのメニューを表示を2つ設定</title> <script> function selectboxChange() { var value1 = document.forms.form1.Select1.value; var value2 = document.forms.form11.Select11.value; var target = document.getElementById("output11"); if ((value == "要素1")&&(value == "要素11")) { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } //--------------------- // </script> </head> <body> <div>プルダウンのメニュー１</div> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value="要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div>プルダウンのメニュー２</div> <form name="form11" action=""> <select id="Select11" onchange="selectboxChange();"> <option>---</option> <option value="要素11">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output11"></div> </body> </html> プルダウンを2個紐づけたいのですが、var value=document.formsの文言を紐づけようとしましたが、 紐づけができません。 ですので、打開案をご教授願えたら幸いです。
- 締切済み
- JavaScript
- IEでプルダウンメニューをデザイン
フォームのページを作成しており、 <select> <option> ～ </option> </select> でプルダウンメニューを作成したのですが、 あまりにもデザインが質素すぎるので 右の矢印ボタンなどを変更したり 高さを高くしたりしたいと考えています。 背景に色をつけるのはできるのですが、 高さを変えたりのCSSがききません。 IE6～9でなるべく見れる状態でプルダウンのメニューを デザインする方法はないでしょうか？ 初歩的質問で申し訳ないのですが、ご存知の方いらっしゃいましたら 教えていただけないでしょうか。よろしくお願いします。
- ベストアンサー
- CSS
- プルダウンについての質問です
プルダウンメニューでリンク先にページを飛ばした後、ツールバーの <戻るボタン>でページを戻すと、同じプルダウンメニューのリンク先 には飛ばなくなってしまいます。 どうすればページを戻した後でも、同じプルダウンメニューのリンク 先に飛ばす事が出来るのでしょうか？ 使ったHTMLは <FORM NAME="linkmenu"> <SELECT style="width: 220px" NAME="linklist" onchange="location=this.value"> <OPTION SELECTED>以下の項目から選択してください。</OPTION> <OPTION VALUE="index.html">1.テストページ1</OPTION> <OPTION VALUE="2.html">2.テストページ2</OPTION> <OPTION VALUE="3.html">3.テストページ3</OPTION> </SELECT> </FORM> というものです。
- ベストアンサー
- HTML
お礼
ありがとうございます。 CSSの知識が乏しく理解できてませんでした。 javascriptではありませんが、やりたいことはできました。 この回答を締め切らせていただきます。