ウェブページ入力ボックスのスタイルトリガー効果

<br />この例では、主に onblur と onFocus という 2 つのパラメータを取り上げます。この 2 つのパラメータはこれまでほとんど見られなかったため、Baidu はすぐに onblur はコントロールがフォーカスを失ったときに発生するイベントであり、onFocus は入力フォーカスになったときに発生するイベントであることを理解しました。この 2 つのパラメータを className と組み合わせて、スタイルシートのクラス名を直接呼び出すことができます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
「http://www.w3.org/TR/html4/loose.dtd」より
<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=gb2312">
<タイトル></タイトル>
</head>
<本文>
<スタイルタイプ="text/css">
.入力1{
font-family: verdana;background-color: #EEEEEE;border-bottom: #FFFFFF 1px solid;border-left: #CCCCCC 1px solid;border-right: #FFFFFF 1px solid;border-top: #CCCCCC 1px solid;font-size: 12px;
}
.input1-bor {
フォントファミリー:verdana;背景色:#F0F8FF;フォントサイズ: 12px;
境界線: 1px 実線 #333333;}
</スタイル>
<テーブルセル間隔=2 セルパディング=0 幅=300 境界線=0>
<tr>
<td><font class="en1">名前:</font> </td>
<td><入力サイズ=40 名前=名前クラス="input1" onblur="this.className='input1'" onfocus="this.className='input1-bor'">
</td>
</tr>
<tr>
<td><font class="en1">メールアドレス:</font></td>
<td><input size=40 name=email class="input1" onblur="this.className='input1'" onfocus="this.className='input1-bor'"></td>
</tr>
<tr>
<td><font class="en1">ウェブサイト:</font> </td>
<td><input size=40 name=url class="input1" onblur="this.className='input1'" onfocus="this.className='input1-bor'">
</td>
</tr>
<tr>
<td><font class="en1">トピック:</font> </td>
<td><input size=40 name=subject class="input1" onblur="this.className='input1'" onfocus="this.className='input1-bor'">
</td>
</tr>
<tr>
<td><font class="en1">コンテンツ: </font> </td>
<td><textarea name=メッセージ行数=5 列数=35 クラス="input1" onblur="this.className='input1'" onfocus="this.className='input1-bor'"></textarea></td></tr></table>
</本文>
</html>

<<: Vueのライブ放送機能の詳しい説明

>>: Docker および Docker-compose のワンクリックインストールチュートリアル (オンラインとオフラインをサポート)