【CSS】placeholderの色とサイズを変更する

placeholderの色の変更

::placeholder、とだけ指定すれば変更ができます。

HTML

<input type="text" placeholder="氏名">

CSS

::placeholder {
  color: red;
}

結果

もしtype別に変更するのであれば

input[type="text"]::placeholder {
  color: red;
}

input[type="email"]::placeholder {
  color: blue;
}

textarea::placeholder {
  color: green;
}

みたいな感じでやると個別に指定が可能です。

これも簡単で、input[type=”text”]などにfont-sizeを指定してあげれば文字サイズを変更できます。

input[type="text"] {
  font-size: 36px;
}

結果

以上ご参考になれば幸いです。