CSS::placeholder疑似要素セレクターのさまざまなアプリケーションシナリオを実装する

CSS::placeholder 疑似要素セレクターの複数のアプリケーション シナリオを実装するには、特定のコード サンプルが必要です。

Web 開発では、CSS は一般的に使用されるスタイル シート言語です。 、Web ページのレイアウトとスタイルを制御するために使用されます。 ::placeholder 疑似要素セレクターは、CSS3 の新しいセレクターであり、入力ボックス (テキスト入力ボックス、パスワード入力ボックスなどを含む) のプレースホルダー スタイルを変更するために使用されます。

以下では、さまざまなアプリケーション シナリオを紹介し、対応するコード例を示します。

1. 入力ボックスのプレースホルダーの色を変更します:

input::placeholder {
  color: red;
}

上記のコードでは、入力ボックスのプレースホルダー テキストの色を赤に変更します。

2. 入力ボックス プレースホルダーのフォント サイズを変更します:

input::placeholder {
  font-size: 16px;
}

上記のコードでは、入力ボックス プレースホルダーのフォント サイズを 16 ピクセルに変更します。

3. 入力ボックスのプレースホルダーのフォント スタイルを変更します:

input::placeholder {
  font-family: 'Arial', sans-serif;
  font-style: italic;
}

上記のコードでは、入力ボックスのプレースホルダーのフォント スタイルを Arial フォントに変更します。 、斜体で表示されているものを使用します。

4. 入力ボックス プレースホルダーの背景色を変更します:

input::placeholder {
  background-color: yellow;
}

上記のコードでは、入力ボックス プレースホルダーの背景色を黄色に変更します。

5. 入力ボックスのプレースホルダーの透明度を変更します:

input::placeholder {
  opacity: 0.5;
}

上記のコードでは、入力ボックスのプレースホルダーの透明度を 0.5 (つまり、0.5) に変更します。半透明の状態。

6. 入力ボックスのプレースホルダーの配置を変更します:

input::placeholder {
  text-align: center;
}

上記のコードでは、入力ボックスのプレースホルダー テキストを中央揃えにします。

7. 入力ボックス プレースホルダーの境界線スタイルを変更します:

input::placeholder {
  border: 1px solid red;
}

上記のコードでは、入力ボックス プレースホルダーに赤い境界線を追加します。

8. 入力ボックス プレースホルダーのアニメーション効果を変更します:

input::placeholder {
  animation: placeholder 2s infinite;
}

@keyframes placeholder {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

上記のコードでは、2 秒の無限ループ アニメーションを入力ボックス プレースホルダー効果に追加します。 50% で不透明度は 0.5 です。

上記のコード例を通じて、::placeholder 疑似要素セレクターのさまざまなアプリケーション シナリオを確認できます。開発者はこれらのコードを柔軟に使用して、特定のニーズに応じてカスタマイズされた入力ボックスのプレースホルダー スタイルを実装できます。

ブラウザごとに ::placeholder 疑似要素セレクターのサポート レベルが異なるため、すべての主流ブラウザでスタイルを正常に表示できることを確認したい場合は、次のようにすることをお勧めします。

input::-webkit-input-placeholder {
  /* Safari, Chrome, and Opera */
  color: red;
}

input::-moz-placeholder {
  /* Firefox 19+ */
  color: red;
}

input::-ms-input-placeholder {
  /* IE 10+ */
  color: red;
}

input::-moz-placeholder {
  /* Firefox 18- */
  color: red;
}

のようなブラウザー接頭辞をコードに追加します。これにより、さまざまなブラウザーで正しく表示できるようになります。

この記事で紹介した CSS ::placeholder 疑似要素セレクターのさまざまな応用シナリオがお役に立てば幸いです。ご質問がございましたら、ディスカッションのためにメッセージを残してください。

以上がCSS::placeholder疑似要素セレクターのさまざまなアプリケーションシナリオを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。