CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの使用：placeholder-空のテキスト入力のスタイルをカスタマイズするために表示

プレースホルダーを持つ入力テキストボックスのスタイルをカスタマイズするには、CSSの：placeholder-shown疑似クラスを使用します。

例

次の例は、CSS：placeholder-shownpseudo-classを示しています。

<!DOCTYPE html>
<html>
<head>
<style>
input:placeholder-shown {
   border-color: dodgerblue;
}
input:nth-of-type(even):placeholder-shown {
   border-color: olivedrab;
}
</style>
</head>
<body>
<input type="text" placeholder="dodgerblue">
<input type="email" placeholder="olivedrab">
</body>
</html>
>

出力

これにより、次の結果が生成されます-

CSSの使用：placeholder-空のテキスト入力のスタイルをカスタマイズするために表示

例

<!DOCTYPE html>
<html>
<head>
<style>
input:placeholder-shown {
   border-color: orange;
   background: powderblue;
}
</style>
</head>
<body>
<input type="radio" checked>
<input type="email" placeholder="orange">
<input type="text">
</body>
</html>

出力

これにより、次の結果が生成されます-

CSSの使用：placeholder-空のテキスト入力のスタイルをカスタマイズするために表示


  1. CSSでテキストボックスのプレースホルダーの色を変更する方法

    ::placeholder疑似要素を使用して、テキストボックスのプレースホルダーテキストの色を変更できます。 CSS::placeholder疑似要素の構文は次のとおりです- ::placeholder { attribute: /*value*/ } 例 次の例は、CSS::プレースホルダー疑似要素を示しています。 <!DOCTYPE html> <html> <head> <style> input:last-child::placeholder {    color: cornflowerblue; } <

  2. フォーム入力フィールドのあまり知られていないCSSプロパティ

    CSSのcaret-color、pointer-events、およびtab-sizeは、フォーム入力フィールドのあまり知られていないプロパティの一部です。 caret-colorプロパティを使用すると、点滅するカレットの色を指定できますが、pointer-eventsを使用すると、ユーザーが要素を見つけられないようにすることができます。最後に、tab-sizeは、tabが使用する空白の量を設定します。 次の例は、これらのプロパティの一部を示しています。 例 <!DOCTYPE html> <html> <head> <style> body {