ホームページ  >  記事  >  ウェブフロントエンド  >  :focus 疑似クラス セレクターを使用してフォーム要素のスタイルを変更する方法

:focus 疑似クラス セレクターを使用してフォーム要素のスタイルを変更する方法

WBOY
WBOYオリジナル
2023-11-20 12:41:091622ブラウズ

:focus 疑似クラス セレクターを使用してフォーム要素のスタイルを変更する方法

使用方法:フォーム要素のスタイルを変更するための疑似クラス セレクターのフォーカス

はじめに:

私たちの Web デザインでは、フォーム要素は次のとおりです。共通のインタラクティブ コンポーネントを使用すると、ユーザーはフォーム要素を通じて Web ページと対話できます。ユーザー エクスペリエンスとインターフェイスの美しさを向上させるために、ユーザーがフォーム要素を操作するときにフォーム要素のスタイルを変更する必要があることがよくあります。この記事では、:focus 疑似クラス セレクターを使用してフォーム要素のスタイルを変更する方法と、具体的なコード例を紹介します。

1. :focus 疑似クラス セレクターとは何ですか?

:focus は CSS3 の疑似クラス セレクターで、現在フォーカスがある要素を選択するために使用されます。ユーザーがクリックするか、Tab キーを使用してフォーカスを切り替えると、:focus 疑似クラス セレクターが有効になります。 :focus 疑似クラス セレクターを使用すると、フォーム要素に現在フォーカスがあるかどうかを反映するために、フォーム要素のスタイルを変更できます。

2. 使用方法: フォーカス疑似クラス セレクター?

ここでは、いくつかの一般的なフォーム要素とその用途を示します: フォーカス疑似クラス セレクター:

  1. 入力要素:
input:focus {
  /* 设置表单元素获取焦点时的样式 */
}
  1. textarea 要素:
textarea:focus {
  /* 设置表单元素获取焦点时的样式 */
}
  1. select 要素:
select:focus {
  /* 设置表单元素获取焦点时的样式 */
}

3. コード例:

次に、具体的なコード例を示します。 :focus 疑似クラス セレクターを使用してフォーム要素のスタイルを変更する方法。

  1. フォーム入力ボックスがフォーカスを取得すると、境界線の色を変更します:
<!DOCTYPE html>
<html>
<head>
  <style>
    input[type=text]:focus {
      border: 2px solid blue;
    }
  </style>
</head>
<body>
  <form>
    <label for="name">用户名:</label>
    <input type="text" id="name" name="name"><br><br>
    <label for="password">密码:</label>
    <input type="password" id="password" name="password"><br><br>
    <input type="submit" value="提交">
  </form>
</body>
</html>

上記のコードでは、入力ボックスがフォーカスを取得すると、その境界線の色が次のように変わります。青。

  1. フォーム ドロップダウン ボックスがフォーカスを取得すると、背景色を変更します:
<!DOCTYPE html>
<html>
<head>
  <style>
    select:focus {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <form>
    <label for="gender">性别:</label>
    <select id="gender" name="gender">
      <option value="male">男</option>
      <option value="female">女</option>
      <option value="other">其他</option>
    </select><br><br>
    <input type="submit" value="提交">
  </form>
</body>
</html>

上記のコードでは、ドロップダウン ボックスがフォーカスを取得すると、背景色が変更されます。色が黄色に変わります。

概要:

:focus 疑似クラス セレクターを使用すると、フォーム要素のさまざまな状態にスタイルを設定して、視覚化効果とインターフェイス インタラクションのユーザー エクスペリエンスを向上させることができます。同時に、読者の参考のために具体的なコード例も提供します。この記事が読者の :focus 疑似クラス セレクターの理解と適用に役立つことを願っています。

以上が:focus 疑似クラス セレクターを使用してフォーム要素のスタイルを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。