-moz-appearance:none zeigt noch eine checkbox

Ich möchte erstellen Sie eine benutzerdefinierte Kontrollkästchen für die folgenden Bereich:

<label class="cmfchklabel"><input type="checkbox" id="cmf-2" name="cmf[2][value][]" value="true" checked>New Year\'s Eve</label>

Das Feld wird von einem plugin, so kann ich nicht verändern, dass die grundlegenden markup.

Ich herausgefunden, wie aktualisieren Sie das Aussehen des Kontrollkästchens in webkit-Browser, aber Firefox hält die Anzeige einer checkbox, auch wenn ich -moz-appearance:none;.

Wie kann ich aktualisieren Sie das Aussehen von meinem checkbox in Firefox mit CSS, ohne meine grundlegenden markup?

Referenz, hier meine aktuelle CSS-Code für die checkbox:

input[type="checkbox"],input[type="checkbox"]:checked {
    -moz-appearance:none;
    -webkit-appearance: none;
    appearance: none;
    border:none;
    outline: none;
}

input[type="checkbox"]:checked:before {
    background:#177dc0;
}

input[type="checkbox"]:before {
    content:'';
    background:#361512;
    display:inline-block;
    height:11px;
    width:11px;
    margin-right:1px;
}

Hier ist mein problem im fiddle.

Dank.

InformationsquelleAutor user2888697 | 2013-10-17

3

none nicht um eine gültige option für -moz-appearance.

Nicht, verwenden Sie diese Eigenschaft auf Websites: es ist nicht nur nicht-standard -,
aber sein Verhalten ändert sich von einem browser zum anderen. Sogar das Stichwort
none nicht das gleiche Verhalten auf jedes form-element über
verschiedene Browser, und manche unterstützen es nicht bei allen.

In der Tat scheint es, dass Firefox nicht Ehre alle CSS auf deine textbox-Eingabe. Sehen diese Geige, zeigt die :before text in Chrome aber nicht in Firefox (v24).
- Es ist trotzdem entfernen Sie die Sichtbarkeit der checkbox im Firefox, wenn nicht mit "-moz-appearance"?
- Nun, es gibt immer display:none. Dann können Sie Ihre neue Kontrollkästchen UI in so etwas wie <label for="myCheckbox" class="checkboxShim"></label>.
- Sie könnten auch check out Mozilla Brick x-toggle. Es ist ziemlich experimentell, aber es sieht aus wie es abgebaut wird, mit mehr Anmut als Präfix CSS-Selektoren.
- Danke. Ich kann es nicht ändern, die Standard-markup–oder ich, aber nur als letzten Ausweg. Das dilemma ist, wie man CSS zu benutzen, um benutzerdefinierte Formatvorlage das Kontrollkästchen innerhalb der vorgegebenen markup. Nochmals vielen Dank.
InformationsquelleAutor Jeremy

ich habe alles versucht, um dieses Problem zu lösen FF, aber es gibt nur 1 Lösung für Firefox

versuchen, diese

CSS

.test_1 {
    white-space: nowrap;
    width: 100px;
    overflow: hidden;
}
.myCheckbox input {
    display: none;
}

.myCheckbox span {
    width: 20px;
    height: 20px;
    display: block;
    background:#00F;
}

.myCheckbox input:checked + span {
    background:#0F0;
}

HTML

<label for="test">Label for my styled "checkbox"</label>
<label class="myCheckbox">
    <input type="checkbox" name="test"/>
    <span style="border:#666 1px solid;">.</span>
</label>

InformationsquelleAutor fahd4007

Unten ist eine Lösung, die ich kam mit, dass erschnüffelt Firefox und verwendet ein zusätzliches element, um eine illusion zu schaffen.

Der trick ist, legen Sie die Eingabe über die extra-element und geben Sie dann die Eingabe einer Deckkraft von 0. Sie können dann den style der extra-element nach Ihren wünschen und verwenden benachbarten Geschwister-Selektoren, um die "hover, geprüft oder Schwerpunkt" pseudo-Klassen.

HTML:

<div class="container">
    <input type="checkbox" value="yes" name="inputs">
    <i class="for_firefox"></i>
</div>
<div class="container">
    <input type="checkbox" value="no" name="inputs">
    <i class="for_firefox"></i>
</div>

JS:

<script>
    /* Sniff out Firefox */
    if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1){
        jQuery('html').addClass('firefox');
    }
</script>

CSS:

<style>
    /* Default Styling */
    .container{
        position:relative;
        height:30px;
        width:50px;
    }

    input[type="checkbox"]{
        -webkit-appearance:none;
        -moz-appearance:none;
        -ms-appearance:none;
        appearance:none;
        border:1px solid gray;
        background-color:#B7D1E2;
        position:relative;
        height:22px;
        width:22px;
    }

    input[type="checkbox"]:checked,
    input[type="checkbox"]:focus{
        background-color:orange;
    }

    .for_firefox{
        display:none;
    }


    /* Firefox Styling */
    .firefox input[type="checkbox"]{
        /* need to add a little width for a better clickable surface area */
        height:26px;
        width:26px;
        opacity:0;
        z-index:2;
    }

    .firefox .for_firefox{
        position:absolute;
        z-index:1;
    }

    .firefox .answers input[type="checkbox"]:checked + .for_firefox,
    .firefox .answers input[type="checkbox"]:focus + .for_firefox {
        background-color:orange;
    }
</style>

Hoffe, das jemand hilft!

InformationsquelleAutor skribbz14

-2

Habe ich beschlossen, nur verwenden Sie eine der "prettyCheckable" jquery-plugin. Es ist eine sehr einfache Art und Weise zu aktualisieren-Kontrollkästchen.

InformationsquelleAutor user2888697

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.