:focus 疑似クラスセレクターを使用してフォーム要素のスタイルを変更する方法-CSSチュートリアル-php.cn

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

WBOY

リリース： 2023-11-20 12:41:09

オリジナル

1538 人が閲覧しました

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

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

はじめに:

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

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

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

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

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

入力要素:

input:focus {
  /* 设置表单元素获取焦点时的样式 */
}

ログイン後にコピー

textarea 要素:

textarea:focus {
  /* 设置表单元素获取焦点时的样式 */
}

ログイン後にコピー

select 要素:

select:focus {
  /* 设置表单元素获取焦点时的样式 */
}

ログイン後にコピー

3. コード例:

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

フォーム入力ボックスがフォーカスを取得すると、境界線の色を変更します:

<!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>

ログイン後にコピー

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

フォームドロップダウンボックスがフォーカスを取得すると、背景色を変更します:

<!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 サイトの他の関連記事を参照してください。