HTML / CSS / jQuery コーディング

【CSS】「placeholder」のテキスト色について


メールフォームでテキストを入力する項目でよく使う「placeholder」ですが、ブラウザによってテキストの色が異なります。
そのため、例えばテキスト入力フォームの「placeholder」を薄い色にしようとしても、別のブラウザでは濃くなってしまいます。
同じ色にするためには「opacity: 1;」を記述する必要があります。

実際に記述すると下記のようになります。

CSS

input::-webkit-input-placeholder { color: #999; opacity: 1; }
input::-moz-placeholder { color: #999; opacity: 1; }

これで他のブラウザでも同じテキスト色で表示されます。

-HTML / CSS / jQuery コーディング

© 2026 Web担当屋 ブログ