使用邊框半徑時輸入範圍上的白色「背景」

您可以在我的問題here中找到屏幕截圖;在嘗試設置範圍輸入的風格時，我注意到它有白色的邊角。我似乎無法弄清楚爲什麼或如何刪除它們，我首先認爲這是一個大綱，但設定提綱是沒有做任何事情。這裏是一個的jsfiddle：http://jsfiddle.net/c1y0y7dj/使用邊框半徑時輸入範圍上的白色「背景」

我的CSS

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

    width: 200px; 
} 
input[type=range]::-webkit-slider-runnable-track { 
    width: 200px; 
    height: 5px; 
    background: #565656; 
    border: none; 
    border-radius: 3px; 
} 
input[type=range]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    border: none; 
    height: 16px; 
    width: 16px; 
    border-radius: 50%; 
    background: #F06A00; 
    margin-top: -5px; 
} 
input[type=range]:focus { 
    outline: none; 
} 
input[type=range]::-moz-range-track { 
    width: 200px; 
    height: 5px; 
    background: #ddd; 
    border: none; 
    border-radius: 3px; 
} 
input[type=range]::-moz-range-thumb { 
    border: none; 
    height: 16px; 
    width: 16px; 
    border-radius: 50%; 
    background: #F06A00; 
} 

input[type=range]::-ms-track { 
    width: 200px; 
    height: 5px; 

    background: transparent; 

    border-color: transparent; 
    border-width: 6px 0; 

    color: transparent; 
} 
input[type=range]::-ms-fill-lower { 
    background: #373737; 
    border-radius: 10px; 
} 
input[type=range]::-ms-fill-upper { 
    background: #575757; 
    border-radius: 10px; 
} 
input[type=range]::-ms-thumb { 
    border: none; 
    height: 16px; 
    width: 16px; 
    border-radius: 50%; 
    background: #F06A00; 
} 
input[type=range]:focus::-ms-fill-lower { 
    background: #373737; 
} 
input[type=range]:focus::-ms-fill-upper { 
    background: #575757; 
}

來源

2016-12-31 MexicanR

我覺得這是你的問題。它已經在這裏得到解決： –

Here是解決

您應該添加到

input[type=range] { 
    -webkit-appearance: none; 
    width: 200px; 
    background: transparent; 
}

來源

2016-12-31 07:22:41

你從字面上只是複製了Ruchit Patel的答案。 – LinusGeffarth

默認輸入標籤有一個白色背景鍍鉻設置，如果你剛剛添加

background-color :#565656 ;

你的第一個輸入選擇應該解決您的問題

來源

2016-12-31 07:17:30

是的，但這會帶走邊界半徑和使它成爲一個矩形。 – MexicanR

試試這個css

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

來源

2016-12-31 07:20:09

使用邊框半徑時輸入範圍上的白色「背景」

回答

相關問題