みかづきブログ その3

3ヶ月つづけてみました。

placeholderのスタイルを変更してみよう。

HTML5で導入されたinput要素のplaceholder属性。
非常に便利です。最近多用しております。
で、プレースホルダのスタイルを変更したいと思って色々試したのでメモを残しておきます。

スタイルの変更方法

Chrome

input::-webkit-placeholder

Firefox

input::-moz-placeholder

という擬似要素のスタイルを変更することによって見た目を整えることができます。
むかしは-moz-pleaceholderは擬似クラスとして指定していたようですが、いまは両方擬似クラスになりました。

最初の例では、

input::-webkit-placeholder {
    color: #ff5050;
}
input::-moz-placeholder {
    color: #ff5050;
}

的なスタイルをあててます。