0

質問内容

inputのrangeのつまみのデザインを変えたいのですが、-webkit-slider-thumbbeforeafterといった擬似要素が付与できません。

ソースコード

input[type="range"]::-webkit-slider-thumb {
    &::before {
      //反映されない
    }
}

非推奨であることは承知ですが、方法はないでしょうか。また、その代替案があれば教えてください。

2
  • プリコンパイラは何を使用されていますか? 純粋な(SassやStylusなどのプリコンパイラを使用しない)CSSでは、&::before という記法は使用できません。
    – sei0o
    Commented 2020年8月20日 2:11
  • scssです。混乱を招くようなので追記しておきます Commented 2020年8月20日 6:53

1 件の回答 1

2

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 関数を用いることが出来るのではないかと思います。

1
  • ありがとうございます。つまみ単体のデザインを変更するためだったので、回答は合ってます。記事等を参考にして理解を深めたいと思います。 Commented 2020年8月20日 13:34

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。