テキストボックス選択時に背景色を変える
サンプルソース
|
<input type="text" value="テキスト１" onfocus="this.style.backgroundColor='#cccccc'" onblur="this.style.backgroundColor='#ffffff'"> <input type="text" value="テキスト２" onfocus="this.style.backgroundColor='#cc0000'" onblur="this.style.backgroundColor='#ffffff'"> |
style.backgroundColorで色名や色コードを指定して背景色を設定します。
onfocusはフォーカスしたとき、onblurはフォーカスを失ったときのイベントです。
それぞれのイベントで背景色を変更しています。
実行結果
関連する内容
- 文字の色を変える
- 文字を斜体に変える
- 文字のフォントサイズを変える
- 文字のフォントを変える
- 文字の太さを変える
- 文字を小文字や大文字に変える
- 文字の最初の文字を大文字に変える
- 文字の背景色を変える
- 文字を表示から非表示にする
- 文字を非表示から表示にする
- ページ全体の文字の色を変える
- ページ全体の背景色を変える
- マウスが画像上と画像外でイメージを変える
- テーブル選択行をマウスカーソルによって背景色を変える
- 文字を表示する(HTMLへ書き出す)
- テキストボックスの文字を小文字や大文字に変える
- チェックボックスで選択されているか調べる
- ラジオボタンで選択された値を調べる
- コンボボックスで選択された行を調べる
- コンボボックスで選択された値を調べる
- コンボボックスで選択された属性を調べる
- ステータスバーに文字列を表示する
- タイトルバーに文字列を表示する
- テキストボックスを使用不可に設定する
- テキストボックスを読み取り専用に設定する
- スタイル属性を表示する
- スタイル属性を一括で変更する