webkit上的範圍輸入中的奇怪的白點

Question

我試圖在webkit上設置範圍輸入的樣式。在Firefox上一切正常，但webkit在軌道上顯示奇怪的白點。

我看過一篇關於這方面的文章，並從中獲得靈感（link）。

現在這裏是演示。正如你所看到的，我無法擺脫白點。

body { 
 
    padding: 30px; 
 
    background-color: black; 
 
} 
 
input[type=range] { 
 
    /*removes default webkit styles*/ 
 
    -webkit-appearance: none; 
 
    /*required for proper track sizing in FF*/ 
 
    width: 300px; 
 
} 
 
input[type=range]::-webkit-slider-runnable-track { 
 
    width: 300px; 
 
    height: 5px; 
 
    background: black; 
 
    border: none; 
 
    border-radius: 3px; 
 
    outline: none; 
 
} 
 
input[type=range]::-webkit-slider-thumb { 
 
    -webkit-appearance: none; 
 
    border: none; 
 
    height: 16px; 
 
    width: 16px; 
 
    border-radius: 50%; 
 
    background: goldenrod; 
 
    margin-top: -4px; 
 
} 
 
input[type=range]:focus { 
 
    outline: none; 
 
} 
 
input[type=range]:focus::-webkit-slider-runnable-track { 
 
    background: #ccc; 
 
}

<input type="range">

它必須是非常簡單的，但我仍然爲此而努力。

謝謝

Answer 1

你之所以有四點是輸入標籤都有默認的背景色。即背景顏色：白色;來自用戶代理樣式表的。

嘗試下面的CSS

input[type=range] { 
    -webkit-appearance: none; 
    border: 0px; 
    width: 300px; 
    background-color: transparent; 
}