物化CSS複選框火狐

我想做一個材料設計複選框，但我有一個小問題與Firefox。 Firefox不顯示覆選框。其他瀏覽器沒有任何問題，它不是隻顯示Firefox。任何人都可以在這方面幫助我？物化CSS複選框火狐

HTML

<input type="checkbox" class="rememberme"> Remember me</input>

CSS

html{ 
    font-family:tahoma; 
} 
.rememberme:before{ 
    visibility:visible; 
    content:""; 
    border:2px solid #DDD; 
    width:15px; 
    height:15px; 
    position:absolute; 
    z-index:1; 
    background:transparent; 
    top:-5px; 
    left:-30px; 
    transition: all .3s ease-in-out; 
    -webkit-transition:all .3s ease-in-out; 
    -moz-transition:all .3s ease-in-out; 
    -o-transition:all .3s ease-in-out; 
} 
.rememberme{ 
    visibility:hidden; 
    backgorund:#FFF; 
    margin-top:20px; 
    margin-left:40px; 
    position absolute; 
} 
.rememberme{ 
    position: relative; 
    background:#FFF; 
    display:inline-block; 
    background:red; 
} 
.rememberme:after{ 
    top:7px; 
    left:-19px; 
    transition: all .3s ease-in-out; 
    -webkit-transition:all .3s ease-in-out; 
    -moz-transition:all .3s ease-in-out; 
    -o-transition:all .3s ease-in-out; 
    visibility:visible; 
    content:""; 
    width:0px; 
    height:0px; 
    position: absolute; 
    background: #DDD; 
    border-radius:50%; 
} 
.rememberme:checked:after{ 
    visibility:visible; 
    content:""; 
    width:30px; 
    height:30px; 
    top:-13px; 
    left:-32px; 
    position: absolute; 
    background: #DDD; 
    border-radius:50%; 
    z-index:0; 

} 
.rememberme:checked:before{ 
    transform:rotate(-45deg); 
    -webkit-transform:rotate(-45deg); 
    -moz-transform:rotate(-45deg); 
    -o-transform:rotate(-45deg); 
    top:-3px; 
    left:-24px; 
    border-color:green; 
    border-top:none; 
    border-right:none; 
    height:5px; 
    width:14px 
}

來源

2015-07-20 innovation

可悲的是，你不能使用在<input>標籤:before和:after僞元素。看到這個問題的更多細節：

Can I use the :after pseudo-element on an input field?

的documentation說，你只能使用上有一個（文檔樹）的內容元素，這些僞構件。 <input> 沒有內容，還有<img>或<br>。

風格你複選框，我建議改變你的標記（加入<label>的複選框，其造型和:before爲:after預期的效果），或使用jQuery之前或之後複選框添加元素。無論如何，您都需要JavaScript來處理複選框的更改事件。

來源

2015-07-20 07:22:12

例如：http://nt1m.github.io/material-framework/#toggles –

的問題似乎是在這一行你的CSS的：

.rememberme{ visibility:hidden;

此行的優先級高於上述規則.rememberme:before{ visibility:visible;

編輯：使用visibility:hidden代替display:none有頁面上的不同效果佈局。第一種方法保留由元素佔據的空間並隱藏它，而第二種方法完全隱藏頁面上沒有空間保留的元素。

來源

2015-07-20 07:23:18 bodi0

這會使原始複選框可見，並在Chrome中顯示2 *複選框*。 –

物化CSS複選框火狐

回答

相關問題