HTML におけるフォーカスの意味-フロントエンドQ&A-php.cn

HTML におけるフォーカスの意味

醉折花枝作酒筹

リリース： 2023-01-06 11:16:26

オリジナル

9086 人が閲覧しました

HTML では、フォーカスは「焦点」を意味します。「:focus」セレクターはフォーカスを受け取った要素を選択するために使用され、要素に「element:focus{属性:属性値}」スタイルを設定するだけで済みます。「:focus」はフォーカスのある要素に適用される擬似クラスで、要素にフォーカスがある間セレクタが適用されます。

HTML におけるフォーカスの意味

このチュートリアルの動作環境: 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>

ログイン後にコピー

レンダリング:

HTML におけるフォーカスの意味