[css]input:rangeの装飾

2箇所指定しないといけない。

こんな感じ
ポイント
クロスブラウザに関して
最後に

こんな感じ

<input type="range" name="" min="0" max="100" value="0">

input[type="range"]{
    //線の部分
    appearance: none;
    -webkit-appearance: none;
    &::-webkit-slider-thumb{
        //丸の部分
        appearance: none;
        -webkit-appearance: none;
    }
}

厳密にはこう。

input[type="range"]{
    &::-webkit-slider-runnable-track{
        //線の部分
        appearance: none;
        -webkit-appearance: none;
    }
    &::-webkit-slider-thumb{
        //丸の部分
        appearance: none;
        -webkit-appearance: none;
    }
}

ポイント

selectとかと同じで、「appearance: none;」で装飾できるようになる。

「::-webkit-slider-thumb」は疑似要素だけどappearanceが持ち越されないので、そっちはそっちで指定してからの装飾になる。

クロスブラウザに関して

input[type="range"]{
    &::-webkit-slider-runnable-track{
        //FireFox以外
    }
    &::-moz-range-track{
        //FireFox
    }
    &::-webkit-slider-thumb{
        //FireFox以外
    }
    &::-moz-range-thumb{
        //FireFox
    }
}

webkitだからね、mozは違うからね。

↓この書き方はダメ。

input[type="range"]{
    &::-webkit-slider-thumb, &::-moz-range-thumb{
    }
}

書式としては間違ってないと思うんだけど、バグって動かなくなった。
SCSSにも関わらず同じ内容をそれぞれに書かなきゃいけない面倒がある。

最後に

現状非推奨っぽいから、使わないほうがいいみたい。