CSSを使用したプレースホルダーテキストのスタイリング

投稿日: 2022-04-20 2022-10-08
タグ: css

プレースホルダーテキストは、通常の入力テキストのフォントファミリとフォントサイズを自動的に継承しますが、プレースホルダーテキストの色を変更したい場合があります。これは、 ::placeholder疑似要素を使用して実現できます。

この例では、プレースホルダーテキストのカスタムカラーを定義し、継承されたフォントサイズをオーバーライドして、プレースホルダーテキストを小さくします。基本的な入力スタイルは次のとおりです。

input[type="text"] {
  font-family: monospace;
  font-size: 20px;
  color: peru;
}

プレースホルダーテキストのスタイルは次のとおりです。

::-webkit-input-placeholder {
  color: peachpuff;
  font-size: 13px;
}
::-moz-placeholder {
  color: peachpuff;
  font-size: 13px;
}
:-ms-input-placeholder {
  color: peachpuff;
  font-size: 13px;
}
::placeholder {
  color: peachpuff;
  font-size: 13px;
}

残念ながら、 ::placeholderには現時点で多数のベンダープレフィックスが必要であることがわかります。

getdocs

13036