it-swarm.com.de

Gestalten Sie ein Kontrollkästchen in Firefox - entfernen Sie das Häkchen und den Rand

Wie stelle ich ein Kontrollkästchen in Firefox ein und lässt das Häkchen und den 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>
14
jnollette

Dieses tutsplus-Tutorial hat 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>

8
jnollette

Über <label>-Tags können Sie dies ganz einfach tun. Legen Sie einfach ein Label um das Kontrollkästchen und fügen Sie ein Dummy-Element ein, das für das Kontrollkästchen mit benutzerdefiniertem Stil 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 bei einigen Farben der Status Ihres Kontrollkästchens für farbblinde Personen möglicherweise nicht sichtbar ist. Bei der Erstellung dieses Codes habe ich nicht daran gedacht, aber die obige Demo könnte für R/G-Farbblinde unsichtbar sein. Bitte beachten Sie dies, wenn Sie dies implementieren (z. B. helle/dunkle Farben auswählen oder Formunterschiede zeigen).


Die Stile, die ich verwendet habe, sind einfach willkürlich und Sie können das beliebig ändern. Sie können sogar bestimmten Text innerhalb des Pseudoelements ::before umschalten, z. B. das, was ich mit hier gemacht habe.

Ich konnte die von Ihnen zur Verfügung gestellte Bild-URL nicht öffnen, aber ich denke, Sie können das gewünschte Bild hinzufügen, indem Sie einfach diesen Code ein wenig ändern. Ändern Sie einfach die aktuelle background-Farbe in die Bild-URL, die Sie verwenden möchten.

Hinweis: Dies funktioniert nicht in einige ältere Browser .

29
Joeytje50

Die akzeptierte Antwort oben ist großartig, aber dieser leichte Tweak zur Geige von Joeytje50 erlaubt das Ankreuzen der Kontrollkästchen.

Die Verwendung der Deckkraft 0 anstelle der Anzeige keine bedeutet, dass das Kontrollkästchen noch tabulierbar ist und daher über die Tastatur aufgerufen werden kann.

Bei absoluter Position wird das Kontrollkästchen für die Eingabe oben links im gezeichneten Feld angezeigt, sodass die 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>

14
Lee Chase

Eine saubere Lösung IMHO, die die Elemente mit reinem CSS neu zeichnet.

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

1
Scott Romack