質問内容
inputのrangeのつまみのデザインを変えたいのですが、-webkit-slider-thumb
にbefore
やafter
といった擬似要素が付与できません。
ソースコード
input[type="range"]::-webkit-slider-thumb {
&::before {
//反映されない
}
}
非推奨であることは承知ですが、方法はないでしょうか。また、その代替案があれば教えてください。
Selectors Level 3 によれば、 1 つの選択子には 1 つの疑似要素が許可されます[1]。同様の問題は crbug にて WontFixとなっており、今後修正される可能性は低いと考えられます。さらに、 input
要素では ::before
, ::after
要素が使用出来ない可能性があります[2]。
7. Pseudo-elements[1]
Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector.
既に使用出来なくなってから数年が経過している非標準機能なので、 ::-webkit-slider-thumb
疑似要素での ::before
, ::after
疑似要素が、どのような装飾の実現に用いるものかを把握しきれていませんが、もしその装飾がつまみの前後の線への装飾であった場合は、 ::webkit-slider-runnable-track
疑似要素や linear-gradient
関数を用いることが出来るのではないかと思います。
&::before
という記法は使用できません。