- ベストアンサー
テキストボックスの背景色変更時に影ができてしまう
- テキストボックスの背景色を変更する際に、影が表示されてしまう問題があります。
- 特にWindowsXP＋IE6の環境で影が発生し、デフォルトのWindowsXPのテーマに影響されます。
- この問題の解決策は見つかっていませんが、IE6のバグの可能性もあると考えられます。
- babbo
- お礼率84% (38/45)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
私の経験では、これに限らずスクリプトでスタイルを変更すると、「背景色」という設定より以前に、「スタイルなし」→「スタイルあり」に設定され、影響する他のスタイルは、妙なデフォルトになってしまうようです。 たとえば今回の件では、「スタイルあり」になった時点で、borderStyleが設定されてしまうということです（立体 groove とか）。 で、これを解決するには、先に「スタイルあり」にしておくのが最善と思います。 <input type="text" value="テキストボックスです" style="border:1px solid #7A96DF;background-color:#ffffff;" onfocus="this.style.backgroundColor='#cccccc'" onblur="this.style.backgroundColor='#ffffff'"> ちなみにonblurで白に「戻して」いますが、そもそも選択前が白とは限らないので、上記のようにあらかじめ選択前を白にしておいたほうが良いと思います。
その他の回答 (1)
- taseki
- ベストアンサー率66% (155/233)
テキストボックスのみのstyleを、HTMLに手を加えずに変更するには、bodyのonloadイベントで次のスクリプトを呼んでください。 function styleSet() { for (iTag = 0; iTag < (document.all.tags("input").length); iTag++) { elmInput = document.all.tags("input")[iTag]; if (elmInput.type == "text" || elmInput.type == "password") { elmInput.style.border = "1px solid #7A96DF"; elmInput.style.backgroundColor = "#FFFFFF"; } } for (iTag = 0; iTag < (document.all.tags("textarea").length); iTag++) { elmInput = document.all.tags("textarea")[iTag]; elmInput.style.border = "1px solid #7A96DF"; elmInput.style.backgroundColor = "#FFFFFF"; } } <body onload="styleSet();"> 上記で実現できますが、作成時の都合でこの方法を取るというのも、正直どうかと…。 > 一つ一つstyle属性を追加するのは現実的ではありません なにも一つ一つ手作業で書かなくても、たとえば、単に <input type="text" を <input type="text" class="TextBox" に全置換して、CSSには input.TextBox { border: ... というようにするのが自然かつスマートなのでは？ （無駄な動作もない）
お礼
度々ありがとうございます。 たしかにそこまでして対応すべきかは疑問に感じています。 今のHTMLに手を一切加えない形であればいいのですが。 結局はIE6のバグってことですかね？
お礼
なるほど、ありがとうございます。 ただ、既に大量のHTMLを作成後に発覚したので一つ一つstyle属性を追加するのは現実的ではありません。 そこで、CSSファイルでinputタグに対しての指定をしようかと思いましたが、そうするとボタンやチェックボックス、ラジオボタンなども変わってしまいます。 テキストボックスのみのstyleを変更する方法はないですかね？ これは話が変わってしまうので別の質問として投げます。