WEBサイトで使う入力フォームに、その欄の例としてうっすらと文字が見えるものがありますよね。
あれはplaceholder属性というものを使ってるんですが、そのテキストの色を変えたかったので調べてみました。
コピペで使えるようにソースも載せてますのでどうぞご利用ください。
placeholder属性の使い方
まずHTMLはこんな感じです。
<form> <input type="tel" placeholder="例) 09012345678"> </form>
サンプルなのでシンプルに書いてますが、重要なのはplaceholder="表示させたいもの"という記述だけです。
▼こんな感じに設定した文字列が表示されます。
placeholder属性で表示されるテキストの色を変える
では本題のplaceholder属性で表示されるテキストの色を変える記述がこちらです。上からChrome・Safari、Firefox、IE用の記述です。
::-webkit-input-placeholder {
color: #ccc;
}
::-moz-placeholder {
color: #ccc; opacity: 1;
}
:-ms-input-placeholder {
color: #ccc;
}
色は#cccという薄いグレーにしてますが、お好きな色に変更してください。
こちらのコードは下記の記事を参考にしました。
僕なりにいじったのは「古いFirefox対応を切り捨て」したこと。自動でアップデートしてくれるブラウザなので問題ないと思ってver18以前に対応する記述を消しました。
IE10以降に対応するために「-ms-」の記述は入れてますが、ここでIE9以前はそもそもplaceholder属性が使えないことを調べてから初めて知ったので、対応するには下記のようなことをしないといけません。
というわけで、あくまで「placeholderはヒントを出すもの」として捉えて、最悪表示されなくても迷わずに入力できる設計をすることが一番かなと。タイトル工夫したりコメント添えたり配置をうまいことあれしたり。
最後に
Operaについては完全に無視したまま来ましたが、ベンダープレフィックスを「-o-」に代えて試したらうまくいくんじゃないかと勝手に妄想してます。
誰か試した方いたら教えてください。