輸入類型=「範圍」在ipad上點擊時留下黑色邊框

Question

我在我的頁面上有一個，並且我用css對它進行了樣式設置。

input[type=range] { 
    -webkit-appearance: none; 
    background-color: #1b2b66; 
    width: 300px; 
    height: 3px; 
    position: relative; 
    top: -9px; 
} 
input[type="range"]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    background-image: url("../images/slider.png"); 
    background-size: 100% auto; 
    border: 0px; 
    width: 35px; 
    height: 35px; 
} 

問題是：在ipad上當用戶單擊滑塊時，黑色邊框圍繞圖像。我如何隱藏這個？

Answer 1

我想出了我的問題。首先感謝大家的幫助。

我忘了設置background-color:屬性。我將它設置爲#FFF，現在可以達到預期的效果。

Answer 2

您需要使用modernizr來執行特徵檢測。

<script src="modernizr.js"></script> 
<script>Modernizr.load({ 
    test: Modernizr.inputtypes.range, 
    nope: ['use your css to define the range input format'] 
}); 
</script> 

此測試尋找支持。當它失敗時，它加載你的CSS來格式化輸入。如果一個瀏覽器支持這個標籤，這意味着將會有一個標準的方式來呈現這個控件，而你的css將是多餘的。在這種情況下，我們通常只是讓瀏覽器忽略我們的CSS設置。

如果你真的想覆蓋默認的CSS設置。嘗試使用!important。

border: 0 !important;