webmanab.html

menu

input要素のplaceholder属性にスタイルを適用させる – 『CSS』

　

inputで入力を補助するためのplaceholder

placeholder属性でinput要素やtextarea要素に記入例やヒントを表示させることができます。
デザインによってはブラウザのデフォルトスタイルから変更したい時がありますが、その時に必要になるtipsです。

今のところブラウザ毎にプレフィクスを記述する必要があります。

css


/* Chrome Safari Opera 15+ Android iOS */
.ex-input::-webkit-input-placeholder {
  color: black;
  opacity: 1;
}
/* IE10+ */
.ex-input:-ms-input-placeholder {
  color: black;
  opacity: 1;
}
/* Firefox19+ */
.ex-input::-moz-placeholder {
  color: black;
  opacity: 1;
}

上記コードではclass指定していますが、属性セレクタの[type="text"]や[type="password"]というように指定してあげることもできます。

上記以外のスタイルのプロパティ(text-shadowとか)も適用させることができます。

おわります。

share
ー

tag
ー

related
ー

tip