Firefoxでカスタムチェックボックスが失敗する

Question

Chromeでうまく機能しているカスタムチェックボックスをCSS3で作成しようとしています。 Firefoxでは...あまりそうではありません。

編集：それはFirefoxの37

以下の答えに正常に動作しているようだと、まだ関連ですが、半ば2013年からスタイル関連の問題が解決されています。

ここではIEのサポートは記載されていませんが、編集/回答は歓迎します。

demo

HTML：

<input type="checkbox" id="first"/> 
<label for="first">This is pretty awesome</label> 

CSS：

input[type=checkbox] { 
    appearance: none; 
    background: transparent; 
    position: relative; 
} 
input[type=checkbox]::after { 
    position: absolute; 
    top: 0; 
    left: 0; 
    content: ''; 
    text-align: center; 
    background: #aaa; 
    display: block; 
    pointer-events: none; 
    opacity: 1; 
    color: black; 
    border: 3px solid black; 
} 
input[type=checkbox] + label { 
    line-height: 48px; 
    margin: 0 15px 0 15px; 
} 
input[type=checkbox]:hover::after { 
    content: ''; 
    background: #32cd32; 
    opacity: .3; 
} 
input[type=checkbox]:checked::after { 
    content: '\2713'; 
    background: #32cd32; 
} 
input[type=checkbox]:checked:hover::after { 
    opacity: 1; 
} 
input[type=checkbox], 
input[type=checkbox]::after { 
    width: 48px; 
    height: 48px; 
    font-size: 46px; 
    line-height: 48px; 
    vertical-align: middle; 
    border-radius: 50%; 
} 
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
} 

_{注：私は、ベンダープレフィックスを除去し、ユーザーが選択簡潔にするためのようなもの。完全なコードはペンの中にあります。}

FirefoxでChromeと同じように見えるように変更するにはどうすればよいですか？

が希望：

が望まれていない：私は1つが存在する場合、私はまだ、よりよい解決策を愛したい（可能なようですな限りそれを修正するために管理

Answer 1

）。

0123：

しかし、ラベルを必要とします。私は

input[type=checkbox]::after 

input[type=checkbox] + label::after 

へのダウンサイドからのセレクタのすべてを切り替えます
• HTMLラベル

結論持つように入力要素が必要です。

• のみ無効なHTMLに悪い

Answer 2

doesntのは技術的にLABELが必要ですが、最大のマークを制御する必要がありませんチェックボックスの直後にターゲット可能な兄弟が存在することを確認します。

すなわち

input[type=checkbox] + span::after{ 
 
    display:block; 
 
    width:50px; 
 
    height:50px; 
 
    background:yellow; 
 
    display:block; 
 

 
} 
 

 
input[type=checkbox]:checked + span::after{ 
 
    display:block; 
 
    width:50px; 
 
    height:50px; 
 
    background:yellow; 
 
    display:block; 
 

 
}

<input type="checkbox"></input> 
 
    <span class="targetMe"></span>

ターゲットスパンを兄弟セレクタを使用し、上記のような要素の後。

は、同様に、この時点でラベルカントーに入れるかもしれません...：P

Answer 3

問題が:afterと::afterは技術的にpseudoselectorが適用された要素の最後子としての要素を作成することです。 Firefoxでは、チェックボックスの中に子を作成するのは好きではありません。これは実際にはより大きなトピックの一部ですreplaced elementsです。

、彼らが選択されている要素内の最初の子要素などの要素を作成しますので、あなたは、チェックボックスに取り組んでいない:beforeと::before pseudoelementsと同じ問題が表示されます。