Cross-Browser-CSS-Checkbox Ausgabe

Ich habe einige Probleme bekommen meine CSS-Checkbox in Firefox angezeigt. Ich benutze ein :after: Element, um das neue Kontrollkästchen zu stylen, und es funktioniert gut für Webkit-Browser (Chrome und Safari), ist aber in Firefox nicht sichtbar. Ich habe es so, dass die native Checkbox sichtbar ist, wenn das gestylt ist nicht so ist es nicht schrecklich, aber ich möchte eine konsistente Erfahrung haben.Cross-Browser-CSS-Checkbox Ausgabe

Es scheint, als ob das Element :after gerade nicht in FF gerendert wird, wenn ich den Code überprüfe.

Hier ist mein HTML:

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

Die CSS:

.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; 
     } 
    } 
    } 
}

Ich habe es auf einem Codepen einrichten. In meiner CSS-Datei habe ich notiert, wo ich diesen Code abgezweigt und modifiziert habe; Angesichts des Markups, das wir verwenden, musste ich einige Änderungen an den gestylten Elementen vornehmen. Der Inspirationscode funktioniert über den Browser, was mich weiter verwirrt!

Quelle

2017-05-01 Nachiket Kumar

:before und :after arbeiten nur an Elementen mit Inhalt. <input> kann keinen Inhalt enthalten, so dass es nicht funktioniert.

Mehr Informationen dazu: doc

Quelle

2017-05-01 13:52:32 Christien

ich verwenden in der Regel das Label-Tag als Tag benutzerdefinierten Stil. Ich persönlich tendiere dazu, mein Label nach meiner Eingabe zu setzen. Die Eingabe nicht umbrechen. Auf diese Weise können Sie tun:

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

Quelle

2017-05-01 14:03:07

Dank @Christien und Andrew, das hilft. Ich denke, ich bin dabei, das native Kontrollkästchen als Fallback zu verwenden, da ich das Markup zu diesem Zeitpunkt nicht ändern kann. –

Ahh, Entschuldigung. Ich wusste nicht, dass das Markup nicht geändert werden konnte. –

Scheint etwas ähnlich zu dieser Frage, Check it out: https://stackoverflow.com/questions/21220360/firefox-not-displaying-properly-before-and-after-pseudo-elements –

dies für Checkbox Code unten versuchen

<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>

Quelle

2017-05-01 15:01:02

$('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>

Quelle

2017-05-03 10:23:12 Saran

Cross-Browser-CSS-Checkbox Ausgabe

Antwort

Verwandte Themen