在Firefox中刪除複選框的邊框

我已經使用複選框背景的圖像，當複選框被選中時圖像會發生變化。它適用於Chrome，但在Firefox中有問題。在Firefox中，它顯示覆選框的邊框或框陰影，並顯示黑色的勾號。在Firefox中刪除複選框的邊框

截圖複選框：

Screenshot of checkbox

label { 
 
    margin: 0; 
 
    height: auto; 
 
    cursor: pointer; 
 
    font-weight: 400; 
 
    padding: 3px 20px 3px 40px; 
 
} 
 

 
input[type="checkbox"] { 
 
    display: block; 
 
    width: 26px; 
 
    height: 26px; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    background-size: contain; 
 
    -webkit-appearance: none; 
 
    outline: 0; 
 
    margin: -4px 0 0; 
 
    margin-top: 1px\9; 
 
    line-height: normal; 
 
    position: absolute; 
 
    margin-top: 4px\9; 
 
} 
 

 
input[type="checkbox"]:not(:checked) { 
 
    background-image: url(http://livemysite.com/Eduardo/img/unchecked.png); 
 
} 
 

 
input[type="checkbox"]:checked { 
 
    background-image: url(http://livemysite.com/Eduardo/img/checked.png); 
 
    background-size: 70%; 
 
}

<label class="checkbox"> 
 
    <input type="checkbox" value="1">Test</label>

來源

2016-09-23 supriya

label.checkbox input[type="checkbox"] {display:none;} 
 
label.checkbox span { 
 
    display:inline-block; 
 
    border:1px solid #BBB; 
 
    width:25px; 
 
    height:25px; 
 
    vertical-align:middle; 
 
    margin:3px; 
 
    transition:width 0.1s, height 0.1s, margin 0.1s; 
 
    background-image: url(http://livemysite.com/Eduardo/img/unchecked.png); 
 
} 
 
label.checkbox :checked + span { 
 
    width:27px; 
 
    height:27px; 
 
    margin: 2px; 
 
    background-image: url(http://livemysite.com/Eduardo/img/checked.png); 
 
    background-size: 70%; 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
}

<label class="checkbox"> 
 
    <input type="checkbox"/> 
 
    <span></span>Test 
 
</label>

來源

2016-09-23 11:54:32 Dhaarani

@supriya現在檢查上面的代碼。如有任何疑問，請告知我 – Dhaarani

謝謝@dhaarani其工作..！ – supriya

@supriya謝謝 – Dhaarani

不幸的是，其對原生瀏覽器複選框無法刪除邊框（它不會在所有的瀏覽器）。你可以處理外觀修飾符以及應用樣式的準確的CSS選擇器，但它有時無法工作。

-moz-appearance:none; 
-webkit-appearance:none; 
-o-appearance:none;

來源

2016-09-23 11:48:45 JoelBonetR

在Firefox中刪除複選框的邊框

回答

相關問題