みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです!

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

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

スタイルの変更方法

Chrome

input::-webkit-placeholder

Firefox

input::-moz-placeholder

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

最初の例では、

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

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