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

前へ 次へ
このQ&Aのポイント
  • テキストボックスの背景色を変更する際に、影が表示されてしまう問題があります。
  • 特にWindowsXP＋IE6の環境で影が発生し、デフォルトのWindowsXPのテーマに影響されます。
  • この問題の解決策は見つかっていませんが、IE6のバグの可能性もあると考えられます。
回答を見る
  • ベストアンサー

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

テキストボックス選択時に背景色をJavaScriptで変更したく、下記のように書きました。 <input type="text" value="テキストボックスです" onfocus="this.style.backgroundColor='#cccccc'" onblur="this.style.backgroundColor='#ffffff'"> これをWindowsXP＋IE6で実行したところ、背景色の処理はうまくいくのですが、画面のプロパティのテーマがデフォルトのWindowsXPの場合、元は影のないテキストボックスなのですが、背景色変更時に影つきのテキストボックスになってしまいます。 テーマがWindowsクラシックだと元々影つきなので変化しません。 背景色変更時に影つきにならないようにできませんでしょうか？ それともこれはIE6のバグなのでしょうか？

  • babbo
  • お礼率84% (38/45)

質問者が選んだベストアンサー

  • ベストアンサー
  • taseki
  • ベストアンサー率66% (155/233)
回答No.1

私の経験では、これに限らずスクリプトでスタイルを変更すると、「背景色」という設定より以前に、「スタイルなし」→「スタイルあり」に設定され、影響する他のスタイルは、妙なデフォルトになってしまうようです。 たとえば今回の件では、「スタイルあり」になった時点で、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で白に「戻して」いますが、そもそも選択前が白とは限らないので、上記のようにあらかじめ選択前を白にしておいたほうが良いと思います。

babbo
質問者

お礼

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

その他の回答 (1)

  • taseki
  • ベストアンサー率66% (155/233)
回答No.2

テキストボックスのみの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: ... というようにするのが自然かつスマートなのでは？ （無駄な動作もない）

babbo
質問者

お礼

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

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • [Javascript]テキストボックスにフォーカスが来たら色を変えたい。

    こんばんわ。 テキストボックスなどにフォーカスが当たったら、そのテキストボックスの背景色を変えたいのです。 onForcus と style を組み合わせてイロイロしましたがダメでした・・・。 onfocus=""とonblur=""で動きを認識して・・・ style="background-color : aqua;" や style="background-color : white;" で背景色を変えたいのですが・・・。 宜しくご伝授くださいませ。

  • javascriptテキストBOX色を元に戻したい

    f.txtbox.style.backgroundColor = 'red'; このようにしてチェックボックスをクリックすると、あるテキストボックスの背景色が変わるようにしたのですが、 変える前のデフォルトのテキストボックス背景色に戻す（デフォルトに戻す）にはどうすればいいですか？ #ffffffにする以外どうすればいいでしょうか？

  • テキストボックスの背景の色について

    CGIプログラミングをPerl言語で実装しています。入力画面のテキストボックスに関してはスタイルシートを使っていますが、同じブラウザ（IE）同じバージョン（6.0.28）でみていますが、テキストボックスの背景の色が異なるマシンがあります。何が原因でしょうか？

    • 締切済み
    • CGI
  • access　テキストボックスの背景色

    初心者です、よろしくお願いします。 仕様環境 winXP access2002 フォームにテキストボックスを貼ると通常の書式が・・ 背景スタイル「標準」 境界線スタイル「実線」 立体表示が「くぼみ」 になっていますが、これを ↓ 背景スタイル「透明」 境界線スタイル「透明」 立体表示「なし」 にして、文字以外は初期の背景と同化したいのですが、 テキストボックスをクリックするとボックス内が白くなります。 クリックしても背景と同化したままにする方法はあるのでしょうか？ 「プロパティ」→「データ」→「使用可能」を「いいえ」にすると そうなりますが、編集ができないので困ります。 良い方法があればお教えください。 よろしくお願いします。

  • 表の一部のセルの背景色を変更したい

    いつもお世話になっております。 IE6.0上で動作するものとして質問させていただきます。 以下のソースの中でBODYタグのonloadイベントで initメソッドを呼びだし、メソッド中で 表中の任意のセルの背景色を変更するにはどのように すればよいのでしょうか。 --------------------------------------- <HTML> <HEAD> <script language="JavaScript"> <!-- function init(){ //------ここでで各セルの背景色を変更したいのです。 } --> </script> </HEAD> <BODY onload="init(); "> <FORM name="tttt"> <TABLE border="1" > 　<TBODY> 　　<TR> 　　　<TD onClick="this.style.backgroundColor = 'black';">test</TD> 　　　<TD onClick="this.style.backgroundColor = 'red';">test</TD> 　　　<TD onClick="this.style.backgroundColor = 'yellow';">test</TD> 　　</TR> 　</TBODY> </TABLE> </FORM> </BODY> </HTML> --------------------------------------- ソースは簡略化しておりますので、内容に不備がございましたら、ご容赦ください。 ご回答をよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • phpのwhile出力に対するJSを使った計算

    JS初心者です。phpでmysqlからデータを取り出し、whileでテーブルに商品名等と単価・数・小計を出力していますが、各項目の数字を変更しphpで再計算させると当然ながらリロードが発生するのでテーブルの頭に戻って表示されてしまいます。この点を改善しなければならず、計算自体は単純なものですので、JSかAjaxでと思ったのですが、いずれの方法でも最初の一行しか動作いたしません。各エレメントの「id='x'」を「id='x<?=[renban]?>'」とすると横取りソフト上では「id=x3752」のように各行個別に番号が割り当てられているのですが、結果は同じで、JSには関係がないようにも見えます。下記ではwhileの中にJSが入っていますが、<SCRIPT TYPE="text/javascript"> <!-- // --> </SCRIPT> としてヘッダに置くと全く反応せず、ブラウザのエラー表示では「オブジェクトを指定して下さい」と出ます。大変困ってしまいました。どなたかご教授いただけますよう、よろしくお願いいたします。 以下見ずらいとは思いますが、実際のコードの抜粋です。問題はフォーム中ほどの部分です。 //ここまでDBからのデータ呼び出し部分 以下本題です while($row = mysql_fetch_array($result)){ PRINT<<<EOF <form action= "mv6.php" name="form1" method="POST" id="form1"> </tr><tr bgcolor="FFFFFF" onMouseOver="this.style.backgroundColor='#FFCCFF'" onMouseOut="this.style.backgroundColor='#FFFFFF'" > <td width="20"> <INPUT type='hidden' name='renban' value='$row[renban]'> <INPUT type='hidden' name="kind[$row[renban]]" value="ok"> <input type="checkbox" name="del[$row[renban]]" value="ok"></td> <td width="220"> <INPUT size='26' type='text' name='shu[$row[renban]]' value='$row[shu]'class = 'nonbor' onFocus="this.style.backgroundColor='#FFFF99'" onBlur="this.style.backgroundColor='ffffff'" ></td> <td width="300" ><INPUT size='36' type='text' name='hin_na[$row[renban]]' value='$row[hin_na]' id = 'hin_na[$row[renban]]' class = 'nonbor' onFocus="this.style.backgroundColor='#FFFF99'" onBlur="this.style.backgroundColor='ffffff'"></td> <SCRIPT> function cal(){ x = document.getElementById('x').value; y = document.getElementById('y').value; z = x * y; document.getElementById('z').value = z; } </SCRIPT> <td width="90" ><INPUT size='12' type='text' name='x' value='$row[tanka]' id='x' class = 'nonborri' onKeyup="cal(this);" onFocus="this.style.backgroundColor='#FFFF99'" onBlur="this.style.backgroundColor='ffffff'"></td> <td width="90"><INPUT size='12' type='text' name='y' value='$row[kazu]' id='y' class = 'nonborri' onKeyup="cal(this);" onFocus="this.style.backgroundColor='#FFFF99'" onBlur="this.style.backgroundColor='ffffff'"></td> <td width="100"><INPUT size='13' type='text' name='z' value='' id='z' class = 'nonborri' onFocus="this.style.backgroundColor='#FFFF99'" onBlur="this.style.backgroundColor='ffffff'"></td> <td width="240"><INPUT size='40' type='text' name='bikou[$row[renban]]' value='$row[bikou]' class = 'nonbor' onFocus="this.style.backgroundColor='#FFFF99'" onBlur="this.style.backgroundColor='ffffff'"> </td> </tr> </TABLE> EOF; }

  • テキストボックスの背景色について

    <html> <body> <form name="form1"> <input type="text" value="よろしく" name="text1"> <script language="javascript"> document.form1.text1.style.background-color = "green"; </script> </form> </body> </html> これはテキストボックスの背景色をグリーンにするプログラムなんですがうまくいきません。どこが間違っているのか指摘してください。

  • ラジオボタンにチェックを入れて、テキストボックスのコメントを消すには

    どなたかお力を・・・ 宜しくお願いします。 メールフォームを作成していて、 テキストボックス入力欄　○ラジオボタン01 ○ラジオボタン02 から、１箇所選択してもらうようにしてあります。 テキストボックスに始めから、例を記入してあるのですが、 ラジオボタンにチェックを入れた際に消えるようにしたいのです。 フォームのコメントを消すjavascriptは変更してもらっても構いません。 <INPUT type="text" name="あいうえお" onfocus="if (this.value == '例）Corneometer') this.value = '';" onblur="if (this.value == '') this.value = '例）テスト';" value="例）テスト"> <INPUT type="radio" name="かきくけこ" value="ラジオ01" onClick="check_reset(this,10)">ラジオ01 <INPUT type="radio" name="かきくけこ" value="ラジオ02" onClick="check_reset(this,11)">ラジオ02

  • イベント発生順序

    いつもお世話になっています。 JavaScriptの発生順序を制御する方法はありますでしょうか？ 例えば、あるテキストボックスがあって、 Ａ１→Ｂ２とフォーカスが移るときのイベントですが、 Ｂ２.onFocus→Ａ２.onBlurの順番でイベントが発生していますが、これを Ａ２.onBlur→Ｂ２.onFocusとしたいです。 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>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する