CSS の疑似要素名の調べ方
◆ -webkit-*** の疑似要素一覧が見たいけどまとめたドキュメントが見つからない
◆ ユーザエージェントの shadow-root の中を見たら対応する疑似要素名が書かれてた
◆ ユーザエージェントの shadow-root の中を見たら対応する疑似要素名が書かれてた
-webkit-*** みたいな疑似要素の一覧が見たかったのですが MDN でも一覧はなさそうでした
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
標準になってるものだけでベンダープレフィックスは含まれてないようです
input などの要素をカスタマイズしたいときに どんな疑似要素が使えるのかわからないのは不便です
Shadow DOM の中に書かれていないかなと思って見てみたら書かれてました
のように pseudo 属性で疑似要素の名前が指定されています
この要素は input[type="number"] の右端に出てくる上下ボタンになります
普段は非表示ですが マウスを乗せると表示されます
マウスを乗せなくても常に表示されるようにしたい場合は こういうスタイルでできます
devtools 上で選択すれば現在のスタイルが見れるので 透明な理由が display ではなく opacity によるものというのは簡単にわかるのでカスタマイズも容易です
組み込み要素の shadow-root を devtools で表示するには devtool の設定で有効にする必要があります
ユーザエージェントの Shadow DOM を見る
webkit プレフィックスなので Firefox では動かないと思いますが 今ではブラウザはほぼ Chrome か Edge なので webkit プレフィックスでも気軽に使っていけます
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
標準になってるものだけでベンダープレフィックスは含まれてないようです
input などの要素をカスタマイズしたいときに どんな疑似要素が使えるのかわからないのは不便です
Shadow DOM の中に書かれていないかなと思って見てみたら書かれてました
<div pseudo="-webkit-inner-spin-button" id="spin"></div>
のように pseudo 属性で疑似要素の名前が指定されています
この要素は input[type="number"] の右端に出てくる上下ボタンになります
普段は非表示ですが マウスを乗せると表示されます
マウスを乗せなくても常に表示されるようにしたい場合は こういうスタイルでできます
input::-webkit-inner-spin-button {
opacity: 1;
}
devtools 上で選択すれば現在のスタイルが見れるので 透明な理由が display ではなく opacity によるものというのは簡単にわかるのでカスタマイズも容易です
組み込み要素の shadow-root を devtools で表示するには devtool の設定で有効にする必要があります
ユーザエージェントの Shadow DOM を見る
webkit プレフィックスなので Firefox では動かないと思いますが 今ではブラウザはほぼ Chrome か Edge なので webkit プレフィックスでも気軽に使っていけます