スポンサード リンク
focus擬似クラス
要素にフォーカスがあたったときに要素にスタイルを設定します要素名:focus { プロパティ : 値 }
対応ブラウザ |
実際の指定方法
cssファイル
input:focus { background-color: #F0FFF0; /* 背景色を変更 */ border: 1px solid #FFE4C4; /* 枠線のスタイルを変更 */ padding:5px; /* 内側のスペースを少し空ける */ }
html部分
<input type="text" size="12" name="sample1" value="input要素">
実際の表示
ie6、ie7以外のブラウザでクリックしてください要素をclassセレクタやidセレクタで絞り込む
cssファイル
input.hoge:focus {/* input要素にhogeとゆうclassセレクタ名をつけました */ background-color: #F0FFF0; /* 背景色を変更 */ border: 1px solid #FFE4C4; /* 枠線のスタイルを変更 */ padding:5px; /* 内側のスペースを少し空ける */ }
html部分
<input.hoge type="text" size="12" name="sample1" value="input要素">
実際の表示
ie6、ie7以外のブラウザでクリックしてください