2017-01-24 11 views
3

私が作成したカスタムスタイルのチェックボックスのスタイリングを修正しようとしています。彼らはFireFox以外のすべてのブラウザで素晴らしいと思う?Firefoxのチェックボックスのスタイルの問題

私はここで問題に複製している:あなたはクロームでこれを開く場合、それは偉大に見えますが、Firefoxでそのほとんどのは完全にスタイルを無視したようhttps://jsfiddle.net/y6Lty5nm/

を?

<li><input type="checkbox" class="chck" data-filter=".sp" id="sp"><p>Super Parent</p></li> 
<li><input type="checkbox" class="chck" data-filter=".cf" id="cf"><p>Control Freak</p></li> 
<li><input type="checkbox" class="chck" data-filter=".fs" id="fd"><p>Food Snob</p></li> 
<li><input type="checkbox" class="chck" data-filter=".bh" id="bh"><p>Bean Head</p></li> 
<li><input type="checkbox" class="chck" data-filter=".bb" id="bb"><p>Busy Bee</p></li> 

input[type="checkbox"]{ 
    appearance: none; 
    -moz-appearance: none; 
    -webkit-appearance: none; 
    background-color: #999999; 
    width: 50px; 
    height: 50px; 
    border-radius: 100px; 
    -moz-border-radius:100px; 
    transition: all 0.5s; 
    cursor: pointer; 
} 

input[type="checkbox"]:checked{ 
    background-color: #19a89d; 
} 

input[type="checkbox"]:focus{ 
    outline: none; 
} 

input[type="checkbox"]:hover{ 
    background-color: #19a89d; 
} 

私はGoogleとスタック上でこれを見ていると、もちろん他の人が同じ問題を機知見てきました、私は、ウェブ・キットを適用しようとしたが、それらを無視しているようですか?

答えて

2

Firefoxの中には、スタイリングのチェックボックスとラジオボタンのために特にmultiplerecordsのバグがあります。

自分のソリューションを作成することをお勧めします。

label input[type="checkbox"]{ display: none; } 
 

 
label input[type="checkbox"]:checked + .cr > .cr-icon{ 
 
    transform: scale(1) rotateZ(0deg); 
 
    opacity: 1; 
 
} 
 

 
label input[type="checkbox"] + .cr > .cr-icon{ 
 
    transform: scale(3) rotateZ(-20deg); 
 
    opacity: 0; 
 
    transition: all .3s ease-in; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<label> 
 
    <input type="checkbox" value="" checked=""> 
 
    <span class="cr"><i class="cr-icon fa fa-check"></i></span> 
 
    Click Me 
 
</label>

+0

これは、私が最後に使用される方法ですが、私のためにこれを引き締めによって私が安心して感じることができます。 – PhpDude