Почему не работает input::-webkit-slider-thumb, input::-moz-slider-thumb?

Question

[VctorIAN]

Здравствуйте, создав небольшой ползунок для поддержки эго не только в webkit браузерах приходится использовать scss шаблон типа

%thumb {
/*something*/
}
input::-webkit-slider-thumb {
          @extend %thumb;
}
input::-moz-slider-thumb {
          @extend %thumb;
}

Но почему вариант типа

input::-webkit-slider-thumb, input::-moz-slider-thumb {
          @extend %thumb;
}

не работает

Answer 1

[inkShio]

Возможно у тебя в чем то другом ошибка, так это все работает ок. Сделай View Compiled CSS и увидишь, что все компилируется нормально.

Answer 2

[slava_arapov]

У каждого браузера свой селектор для ползунка, и чужие он парсить не умеет. Из-за этого правило считается ошибочным, и не обрабатывается.

https://stackoverflow.com/questions/73018008/css-c...

Приходится писать по правилу для каждого браузера.