cssのplaceholderにまつわる事項
アクセシビリティ対応で気にする機会が少なくないので、以降にまとめる。
目次
- placeholderに対してはCSS指定が可能。
- placeholderに対するcssプロパティの適用状況は、chromeの開発者ツールで確認可能。
- 一部ブラウザではcolor指定はopacityも気にしておく。
placeholderに対してはCSS指定が可能。
例えば次のような形で指定可能。
input.hoge::placeholder
昔は一部ブラウザは対応状況を確認する必要があったが、今はあまり気にせずとも良くなってきた。
placeholderに対するcssプロパティの適用状況は、chromeの開発者ツールで確認可能。
但し、設定が必要。
やり方は先達の方々がウェブに上げてくれてる。
参考：
placeholderに付いてるスタイルを見てみたい！【Shadow DOM】 - Qiita
一部ブラウザではcolor指定はopacityも気にしておく。
例えば、何故かFFだけplaceholderのデフォルトのopacityが薄くなるように値指定されてる。
これはCSSプロパティの指定によって改善できる。
参考
シャドウ DOM の使用 - ウェブコンポーネント | MDN (mozilla.org)
::placeholder - CSS: カスケーディングスタイルシート | MDN (mozilla.org)