自定義CSS複選框不適用於Mozilla，適用於所有其他瀏覽器

-2

我爲Chrome創建了一個自選複選框，但是一旦完成，我的瀏覽器測試就完全無法用於Firefox。我在codepen中附加了我的代碼的副本。有沒有人有另一種方式建立一個自定義複選框，而不是在psuedo類之前和之後？自定義CSS複選框不適用於Mozilla，適用於所有其他瀏覽器

[1]: https://codepen.io/Edward-Developer/pen/NvRbzR 


HTML 

    <div class="img-icon-wrapper"> 
     <p>    
     <span class="wpcf7-form-control-wrap checkbox-972"><span class="wpcf7-form- 
     control  wpcf7-checkbox wpcf7-exclusive-checkbox lori"><span 
     class="wpcf7-list-item first  last"><label><input type="checkbox" 
     name="checkbox-972" value="Lori St. Louis" />  <span class="wpcf7-list- 
     item-label">Lori St. Louis</span></label></span></span>  </span> 
     </p> 
    </div> 

CSS 


input:before { 
    position: absolute; 
    width: 38px; 
    background: #fff; 
    height: 38px; 
    content: ""; 
    border: 5.2px solid blue; 
    top: 0; 
} 

input:before { 
    position: absolute; 
    width: 38px; 
    background: #fff; 
    height: 38px; 
    content: ""; 
    border: 5.2px solid $lightBlue; 
    top: 0; 
} 

input[type="checkbox"]:checked:after { 
    position: relative; 
    width: 10px; 
    height: 10px; 
    margin-left: -5px; 
    margin-top: -4px; 
    content: "✓"; 
    height: 41px; 
    width: 19px; 
    -webkit-transform: rotate(7deg) skew(0deg); 
    left: 8px; 
    bottom: 38px; 
    font-size: 65px; 

} 
input[type="checkbox"]:hover:checked:after { 
    border-color: $darkBlue; 
} 

input[type="checkbox"]{ 
    margin-left:0; 
}

來源

2017-08-02 Edward

哪裏codepen？ –

編輯你的問題，並從codepen這裏添加代碼。 –

@JasonSpradlin無需codepen或小提琴。 OP必須在他們的問題中包含一個[mcve]，他們還可以使用內置的片段對其進行格式化以使其可執行。 – j08691

如果我理解正確，Firefox忽略：之前和之後：父元素不呈現子元素。所以，：之前和之後不適用於type = checkbox的輸入。

對於另一種方法，應該工作的跨瀏覽器，請參閱：https://stackoverflow.com/a/21863085/542047

來源

2017-08-02 21:40:39

自定義CSS複選框不適用於Mozilla，適用於所有其他瀏覽器

回答

相關問題