サファリにフォーカスを合わせたスタイルを設定する

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); 
} 

私は「アウトライン」をスタイリングを参照の事を見てきましたが、私はそれを使用しての成功を持っていないです。この要素を対象とする擬似クラススタイルが存在する場合、いくつかの洞察を得ることを望む。あなたが探している

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; 
} 

私はこれが役に立てば幸いで遊んで気軽に！