69722


## 質問内容

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

**ソースコード**

[code]

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

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


CC BY-SA 4.0
2020-08-19T17:58:06.117
69701
2020-08-21T11:04:30.257
2020-08-21T11:04:30.257
32986
29881
question
html css sass
inputのrangeのつまみのデザインを変えたい


Selectors Level 3 によれば、 **1 つの選択子には 1 つの疑似要素**
が許可されます[[1]](https://www.w3.org/TR/selectors-3/#pseudo-elements)。同様の問題は crbug
にて [WontFixとなっており](https://crbug.com/582301)、今後修正される可能性は低いと考えられます。さらに、 `input`
要素では `::before`, `::after`
要素が使用出来ない可能性があります[[2]](https://ja.stackoverflow.com/a/61195/32986)。

> ## 7\. Pseudo-elements[[1]](https://www.w3.org/TR/selectors-3/#pseudo-
> elements)
>
> 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`
疑似要素](https://developer.mozilla.org/ja/docs/Web/CSS/::-webkit-slider-runnable-
track)や `linear-gradient` 関数を用いることが出来るのではないかと思います。


CC BY-SA 4.0
2020-08-20T09:50:25.953
69722
2020-08-20T09:50:25.953
32986
69701
answer