クロスブラウザのCSSチェックボックスの問題

Question

CSSチェックボックスをFirefoxに表示する際に問題が発生します。私は:after:要素を使用して新しいチェックボックスのスタイルを設定していますが、Webkitブラウザ（ChromeとSafari）では正常に動作しますが、Firefoxでは表示されません。私はそれを持っているので、ネイティブのチェックボックスが表示されますので、それはひどいではないが、私は一貫した経験をしたいと思います。

コードを検査すると、:after要素がFFでレンダリングされていないようです。私はそれがCodepenに設定している

.checkbox { 
    label { 
    position: relative; 
    cursor: pointer; 
    padding-left: 1em; 
    } 
    &:hover { 
    input[type=checkbox] { 
     &:after { 
     cursor: pointer; 
     border-color: blue; 
     } 
    } 
    } 
    input[type=checkbox] { 
    position: absolute; 
    &:after { 
     background: white; 
     content: ""; 
     display: inline-block; 
     width: 1.5em; 
     height: 1.5em; 
     position: relative; 
     top: -4px; 
     border-radius: 3px; 
     border: 2px solid gray; 
     transition: border 0.3s ease; 
    } 
    &:checked { 
     &:after { 
     background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDkgNDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBvbHlsaW5lIGlkPSJQYXRoIiBzdHJva2U9IiM0MjkxREIiIHN0cm9rZS13aWR0aD0iMTEiIHBvaW50cz0iMy43NTY1MzE0OCAxOC45ODA0MDUyIDIyLjc1Mzc0MjQgMzMuMDg5OTk4NiA0NC41ODgzMTcxIDMuNDk1NDY5MjIiPjwvcG9seWxpbmU+PC9nPjwvc3ZnPg==); 
     background-repeat: no-repeat; 
     background-position: center left 2px; 
     background-size: 75%; 
     border-color: blue; 
     } 
    } 
    } 
} 

：

<div class="text-center checkbox"> 
    <label> 
    <input type="checkbox" value="on"> 
    </label> 
</div> 

CSS：

は、ここに私のHTMLです。私のCSSファイルでは、どこからこのコードをフォークして修正したかを書き留めました。私たちが使用しているマークアップを想定して、スタイル設定されている要素をいくつか微調整する必要がありました。インスピレーションコードは、さらに私を謎めいているクロスブラウザーで動作します！

Answer 1

:beforeおよび:afterは、内容のある要素でのみ機能します。 <input>にはコンテンツが含まれていないため、動作しません。この上

さらに詳しい情報：doc

Answer 2

私は一般的にカスタムスタイルタグなどの標識タグを使用します。私は個人的に入力後に自分のラベルを貼る傾向があります。入力をラップしません。あなたが行うことができますこの方法：

input[type=checkbox] + label {//Basic styles} 
input[type=checkbox]:checked + label {//Checked styles} 

Answer 3

が

<style type="text/css"> 
    * { 
     box-sizing: border-box; 
    } 

    body { 
     margin: 3em; 
     background: #efefef; 
    } 
    input[type=checkbox] { 
     display: block; 
     width: 30px; 
     height: 30px; 
     cursor: pointer; 
     background-repeat: no-repeat; 
     background-position: center center; 
     background-size: contain; 
     -webkit-appearance: none; 
     outline: 0; 
     background: white; 
     border-radius: 3px; 
     border: 2px solid #dedede; 
     transition: border 0.3s ease; 


    } 
    input[type="checkbox"]:hover{ 
      border-radius: 3px; 
      border: 2px solid #4291DB; 
      transition: border 0.3s ease; 

    } 
    input[type=checkbox]:checked { 
      background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDkgNDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBvbHlsaW5lIGlkPSJQYXRoIiBzdHJva2U9IiM0MjkxREIiIHN0cm9rZS13aWR0aD0iMTEiIHBvaW50cz0iMy43NTY1MzE0OCAxOC45ODA0MDUyIDIyLjc1Mzc0MjQgMzMuMDg5OTk4NiA0NC41ODgzMTcxIDMuNDk1NDY5MjIiPjwvcG9seWxpbmU+PC9nPjwvc3ZnPg=='); 
      background-repeat: no-repeat; 
      background-position: center left 2px; 
      background-size: 75%; 

      border-radius: 3px; 
      border: 2px solid #4291DB; 
      transition: border 0.3s ease; 


    } 
    </style> 
    <div class="text-center"> 
     <label> 
     <input type="checkbox" value="on"> 
     </label> 
    </div> 

Answer 4

$('input').click(function(){ 
 
    if($(this).prop("checked") == true){ 
 
     $(this).closest("label").addClass("checked"); 
 
     $(this).closest("label").removeClass("unchecked"); 
 
    } 
 
    else if($(this).prop("checked") == false){ 
 
     $(this).closest("label").addClass("unchecked"); 
 
\t \t $(this).closest("label").removeClass("checked"); 
 
    } 
 
});

label input { 
 
    opacity: 0; 
 
    cursor: pointer; 
 
    -ms-transform: scale(1.5); 
 
    -moz-transform: scale(1.5); 
 
    -webkit-transform: scale(1.5); 
 
    -o-transform: scale(1.5); 
 
} 
 
label.unchecked { 
 
    background: #000; 
 
    cursor:pointer; 
 
} 
 
label.checked { 
 
    background: green; 
 
    cursor:pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="text-center checkbox"> 
 
    <label class="unchecked"> 
 
    <input type="checkbox" value="on"> 
 
    </label> 
 
</div>