ホームページ > 記事 > ウェブフロントエンド > HTML におけるフォーカスの意味
HTML におけるフォーカスの意味
- 醉折花枝作酒筹オリジナル
- 2021-06-03 16:27:179072ブラウズ
HTML では、フォーカスは「焦点」を意味します。 「:focus」セレクターはフォーカスを受け取った要素を選択するために使用され、要素に「element:focus{属性:属性値}」スタイルを設定するだけで済みます。 「:focus」はフォーカスのある要素に適用される擬似クラスで、要素にフォーカスがある間セレクタが適用されます。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
:フォーカス セレクターは、フォーカスを受け取る要素を選択するために使用されます。
:focus は、フォーカスを持つ要素に適用される疑似クラスです。
:focus は、要素にフォーカスがある時間に適用されます。
:focus セレクターは、キーボード イベントまたはその他のユーザー入力を受け取ることができる要素である限り使用できます。ほとんどの場合、:focus セレクターはリンクとフォーム要素で使用されます。
例:
a:focus {outline: 1px dotted red;}
input:focus {background: yellow;}注::focus は IE8 で動作します。DOCTYPE を宣言する必要があります
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
input:focus {
outline: 0;
/* 去除浏览器默认样式 */
border: 2px solid rgb(238, 175, 238);
background-color: rgb(255, 230, 192);
text-shadow: 1px 1px saddlebrown;
}
</style>
</head>
<body>
<p>点击文本输入框表单可以看到紫色边框和橘色背景:</p>
<form>
用户名: <input type="text" name="username" /><br />
密 码: <input type="password" name="password" />
</form>
</body>
</html>レンダリング:
注:
通常の状況では、フォーム要素にフォーカスが置かれると、ブラウザは要素の周囲にアウトラインを自動的に追加します。ブラウザによって追加されるスタイルは、ブラウザごとに固有です。デフォルトのスタイルは、多くの場合、ブラウザごとに見た目が異なります。
しかし、ページの全体的な美しさとブラウザーのスタイルの互換性を確保するために、多くの場合、要素にフォーカスが当たったときに要素のスタイルを変更し、デフォルトのスタイルを独自のスタイルに置き換える必要があります。
現時点では、css :focus セレクターを使用して、ブラウザーがフォーカスを取得したときに要素のデフォルトのスタイルを設定できます。
推奨学習: html ビデオ チュートリアル
以上がHTML におけるフォーカスの意味の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。