テキストボックスの背景色変更時に影ができてしまう

解決済

質問者：babbo
質問日時：2005/07/06 11:50
回答数：2件

テキストボックス選択時に背景色をJavaScriptで変更したく、下記のように書きました。

<input type="text" value="テキストボックスです" onfocus="this.style.backgroundColor='#cccccc'" onblur="this.style.backgroundColor='#ffffff'">

これをWindowsXP＋IE6で実行したところ、背景色の処理はうまくいくのですが、画面のプロパティのテーマがデフォルトのWindowsXPの場合、元は影のないテキストボックスなのですが、背景色変更時に影つきのテキストボックスになってしまいます。
テーマがWindowsクラシックだと元々影つきなので変化しません。

背景色変更時に影つきにならないようにできませんでしょうか？
それともこれはIE6のバグなのでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.1ベストアンサー

回答者： taseki
回答日時：2005/07/06 19:25

私の経験では、これに限らずスクリプトでスタイルを変更すると、「背景色」という設定より以前に、「スタイルなし」→「スタイルあり」に設定され、影響する他のスタイルは、妙なデフォルトになってしまうようです。

たとえば今回の件では、「スタイルあり」になった時点で、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で白に「戻して」いますが、そもそも選択前が白とは限らないので、上記のようにあらかじめ選択前を白にしておいたほうが良いと思います。

- 0
- 件

通報する

この回答へのお礼

なるほど、ありがとうございます。
ただ、既に大量のHTMLを作成後に発覚したので一つ一つstyle属性を追加するのは現実的ではありません。
そこで、CSSファイルでinputタグに対しての指定をしようかと思いましたが、そうするとボタンやチェックボックス、ラジオボタンなども変わってしまいます。
テキストボックスのみのstyleを変更する方法はないですかね？
これは話が変わってしまうので別の質問として投げます。

通報する

お礼日時：2005/07/06 20:19