初めて自分の家と他人の家が違う、と意識した時

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

解決済

  • 質問者：babbo
  • 質問日時：
  • 回答数：2件

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

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

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

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

通報する

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

質問の本文を隠す

A 回答 (2件)

No.1ベストアンサー

  • 回答者： taseki
  • 回答日時：

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


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

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

通報する
お礼日時：2005/07/06 20:19

No.2

  • 回答者： taseki
  • 回答日時：

テキストボックスのみの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: ...
というようにするのが自然かつスマートなのでは？
（無駄な動作もない）
    • good
    • 0
    • 件
通報する
この回答へのお礼

度々ありがとうございます。
たしかにそこまでして対応すべきかは疑問に感じています。
今のHTMLに手を一切加えない形であればいいのですが。

結局はIE6のバグってことですかね？

通報する
お礼日時：2005/07/06 23:24

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

おすすめ情報

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報