Stil ein Kontrollkästchen in Firefox - entfernen Sie Kontrollkästchen und Rahmen

Question

Wie style ich ein Kontrollkästchen in Firefox, und haben das Häkchen und Rand verschwinden?

http://jsfiddle.net/moneylotion/qZvtY/

CSS:

body { background: black; } 
#conditions-form { color: white; } 
#conditions-form input[type=checkbox] { 
    display:inline-block; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    -o-appearance:none; 
    appearance: none; 
    width:19px; 
    height:19px; 
    background: url('http://demo.somedomain.com/wp-content/themes/themename/images/care-plan-checkbox.gif') no-repeat top left; 
    cursor:pointer; 
} 
#conditions-form input[type=checkbox]:checked { 
    background:url('http://demo.somedomain.com/wp-content/themes/themename/images/care-plan-checkbox-checked.gif') no-repeat top left; 
} 

HTML:

<form id="conditions-form"> 
    <ul> 
     <li> 
      <input id="condition3" type="checkbox" name="conditions[condition3]"></input> 
      <label class="checkbox" for="condition3">Conditions 3</label> 
     </li> 
    </ul> 
</form> 

Answer 1

Diese tutsplus tutorial meine Frage gelöst.

input[type="checkbox"] { 
 
    display:none; 
 
} 
 
    
 
input[type="checkbox"] + label span { 
 
    display:inline-block; 
 
    width:19px; 
 
    height:19px; 
 
    margin:-1px 4px 0 0; 
 
    vertical-align:middle; 
 
    background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) left top no-repeat; 
 
    cursor:pointer; 
 
} 
 
input[type="checkbox"]:checked + label span { 
 
    background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) -19px top no-repeat; 
 
}

<input type="checkbox" id="c1" name="cc" /> 
 
<label for="c1"><span></span>Check Box 1</label>

Answer 2

Es gibt eine ganz einfache Art und Weise Sie dies über <label> Tags tun können. Legen Sie einfach eine Beschriftung um das Kontrollkästchen und fügen Sie ein Dummy-Element ein, das für das Kontrollkästchen für das benutzerdefinierte Format verwendet wird. Zum Beispiel:

label.checkbox input[type="checkbox"] {display:none;} 
 
label.checkbox span { 
 
    display:inline-block; 
 
    border:2px solid #BBB; 
 
    border-radius:10px; 
 
    width:25px; 
 
    height:25px; 
 
    background:#C33; 
 
    vertical-align:middle; 
 
    margin:3px; 
 
    position: relative; 
 
    transition:width 0.1s, height 0.1s, margin 0.1s; 
 
} 
 
label.checkbox :checked + span { 
 
    background:#6F6; 
 
    width:27px; 
 
    height:27px; 
 
    margin: 2px; 
 
} 
 
label.checkbox :checked + span:after { 
 
    content: '\2714'; 
 
    font-size: 20px; 
 
    position: absolute; 
 
    top: -2px; 
 
    left: 5px; 
 
    color: #99a1a7; 
 
}

<label class="checkbox"> 
 
    <input type="checkbox"/> 
 
    <span></span> 
 
    I like cake 
 
</label>

---

EDIT: Beachten Sie, dass einige Entscheidungen von Farben könnten den Zustand Ihrer Checkbox unsichtbar für farbenblind Menschen machen. Wenn ich diesen Code mache, habe ich nicht daran gedacht, aber die obige Demo könnte für R/G-farbenblinde Leute unsichtbar sein. Wenn diese Umsetzung sollen Sie bitte, dass im Auge (hell/dunkel Farben zum Beispiel wählen, oder eine Differenz in Form zeigen)

---

Die Stile I sind verwendet nur willkürlich, und Sie können, dass Sie etwas ändern wollen . Sie können sogar bestimmten Text darin über das ::before Pseudo-Element umschalten, wie zum Beispiel das, was ich getan habe here.

Ich konnte die Bild-URL nicht öffnen, die Sie in Ihrer Frage verwendet haben, aber ich denke, dass Sie in der Lage sein werden, das gewünschte Bild einzufügen, indem Sie einfach diesen Code ein wenig ändern. Ändern Sie einfach die aktuelle Farbe background in die Bild-URL, die Sie verwenden möchten.

Hinweis: Dies funktioniert nicht in some older browsers.

Answer 3

Die angenommene Antwort oben ist großartig, aber this slight tweak an die Geige von Joeytje50 erlaubt die Check-Boxen zu Tabbed to.

Die Verwendung von Opazität 0 anstelle von display bedeutet, dass das Kontrollkästchen immer noch tabellierbar und somit über die Tastatur zugänglich ist.

Position absolut platziert die Eingabe-Checkbox oben links von der gezeichneten Box, was bedeutet, dass Ihre Formatierung sauber bleibt.

input[type="checkbox"] { 
 
    opacity: 0; 
 
    position: absolute; 
 
} 
 
input[type="checkbox"] + label { 
 
    text-align:center; 
 
    cursor:pointer; 
 
} 
 
input[type="checkbox"]:focus + label { 
 
    background-color: #ddd; 
 
} 
 
input[type="checkbox"] + label div { 
 
    display:inline-block; 
 
    line-height: 16px; 
 
    font-size: 12px; 
 
    height: 16px; 
 
    width: 16px; 
 
    margin:-0px 4px 0 0; 
 
    border: 1px solid black; 
 
    color: transparent; 
 
} 
 
input[type="checkbox"]:checked + label div { 
 
    color: black; 
 
}

<input type="checkbox" id="c1" name="cc" /> 
 
<label for="c1"> 
 
    <div>&#x2714;</div>Check Box 1<br /> 
 
</label> 
 
<input type="checkbox" id="c12" name="cc" /> 
 
<label for="c12"> 
 
    <div>&#x2714;</div>Check Box 2<br /> 
 
</label>

Answer 4

A cleaner Lösung IMHO dass reine CSS die Elemente neu zu zeichnen, verwendet.

Codepen

   input[type="checkbox"] { 
 
      opacity: 0; 
 
      position: absolute; 
 
     } 
 

 
     input[type="checkbox"] ~ label:before { 
 
      content: ''; 
 
      display: inline-block; 
 
      cursor: pointer; 
 
      ... 
 
      border: 3px solid #999; 
 
      border-radius: 2px; 
 
      transition: .3s; 
 
     } 
 

 
     input[type="checkbox"]:checked ~ label:before { 
 
      background: #333; 
 
     }