Стилизация сфокусированного ввода в сафари

Question

Я пытаюсь применить пользовательские стили к вводу [type = range] и проблемы с этими стилями в Safari. Chrome, FF и IE работают нормально (хотя FF и IE не перечислены ниже в фрагменте кода). pe-color() - внешние функции scss, вызывающие хранимые цвета переменных.

input[type=range] { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    border: none; 
    width: 12%; 
    outline: none; 
    background: none; 
} 
input[type=range]:focus { 
    outline: none; 
} 
input[type=range]::-webkit-slider-runnable-track { 
    height: $slider-track-height; 
    background: pe-color(hyperdrive); 
} 
input[type=range]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1); 
    border: 1px solid pe-color(hairline-gray); 
    height: $slider-thumb-diameter; 
    width: $slider-thumb-diameter; 
    border-radius: 50%; 
    background: pe-color(white); 
    margin-top: -8px; 
} 
input[type=range]:focus::-webkit-slider-thumb { 
    border: 1px solid pe-color(basic-blue); 
    box-shadow: 0px 0px 5px pe-color(basic-blue); 
} 
input[type=range]::-moz-focus-outer { 
    border: 0; 
} 
input[type=range]::-moz-range-track { 
    height: $slider-track-height; 
    background: pe-color(hyperdrive); 
    border: none; 
} 
input[type=range]::-moz-range-thumb { 
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1); 
    border: 1px solid pe-color(hairline-gray); 
    height: $slider-thumb-diameter; 
    width: $slider-thumb-diameter; 
    border-radius: 50%; 
    background: pe-color(white); 
} 
input[type=range]:focus::-moz-range-thumb { 
    border: 1px solid pe-color(basic-blue); 
    box-shadow: 0px 0px 5px pe-color(basic-blue); 
} 
input[type=range]::-ms-track { 
    height: $slider-track-height; 
    border-color: transparent; 
    border-width: 11px 0; 
    background: transparent; 
    color: transparent; 
} 
input[type=range]::-ms-thumb { 
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1); 
    border: 1px solid pe-color(hairline-gray); 
    height: $slider-thumb-diameter; 
    width: $slider-thumb-diameter; 
    border-radius: 50%; 
    background: pe-color(white); 
} 
input[type=range]::-ms-fill-lower { 
    background: pe-color(hyperdrive); 
} 
input[type=range]::-ms-fill-upper { 
    background: pe-color(hyperdrive); 
} 
input[type=range]:focus::-ms-thumb { 
    border: 1px solid pe-color(basic-blue); 
    box-shadow: 0px 0px 5px pe-color(basic-blue); 
} 

Через различные Googling я видел вещи, относящиеся к стилизации «контур», но я, не имея успеха в использовании этого. Надеемся получить некоторое представление о том, существует ли стиль псевдокласса для нацеливания на этот элемент.

Answer 1

Все, что вы ищете, здесь https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/

Причина вы не видите никаких изменений, потому что вы, вероятно, не будут перезаписаны стиль браузера по умолчанию и не удалены все контуры и изображения для слайдер.

Заканчивать этот codepen и не стесняйтесь играть с ним вокруг http://codepen.io/vveleva/pen/gwBbGB

input[type=range] { 
    -webkit-appearance: none; /* Hides browser default slider */ 
    width: 100%; 
    background: transparent; 
} 

input[type=range]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
} 

input[type=range]:focus { 
    outline: none; 
} 

input[type=range]:focus::-webkit-slider-thumb { 
    /* changes slider on click and drag */ 
    border: 1px solid red; 
    box-shadow: 0px 0px 5px red; 
} 

input[type=range]::-ms-track { 
    width: 100%; 
    cursor: pointer; 
    /* Hides the slider so custom styles can be added */ 
    background: transparent; 
    border-color: transparent; 
    color: transparent; 
} 

input[type=range]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    border: 1px solid #000; 
    height: 26px; 
    width: 26px; 
    border-radius: 3px; 
    background: #fff; 
    cursor: pointer; 
    margin-top: -6px; 
    box-shadow: 1px 1px 1px #000, 0px 0px 1px #0d0d0d; 
} 



input[type=range]::-webkit-slider-runnable-track { 
    width: 100%; 
    height: 16px; 
    cursor: pointer; 
    box-shadow: 1px 1px 5px black; 
    background: gray; 
    border-radius: 1.3px; 
} 

input[type=range]:focus::-webkit-slider-runnable-track { 
    background: blue; 
    border: 0.2px solid red; 
} 

Я надеюсь, что это помогает!