Eingabe-Styling für CSS-Kontrollkästchen

Jeder Stil für inputwirkt sich auf jedes Eingabeelement aus. Gibt es eine Möglichkeit, das Styling so festzulegen, dass nur Kontrollkästchen angewendet werden, ohne dass jedem Kontrollkästchenelement eine Klasse zugewiesen wird?

Mit CSS 2 können Sie dies tun:

input[type='checkbox'] { ... }

Dies sollte mittlerweile ziemlich weit verbreitet sein. Siehe Unterstützung für Browser

Ich erstelle meine eigene Lösung ohne Etikett

input[type=checkbox] {
         position: relative;
	       cursor: pointer;
    }
    input[type=checkbox]:before {
         content: "";
         display: block;
         position: absolute;
         width: 16px;
         height: 16px;
         top: 0;
         left: 0;
         border: 2px solid #555555;
         border-radius: 3px;
         background-color: white;
}
    input[type=checkbox]:checked:after {
         content: "";
         display: block;
         width: 5px;
         height: 10px;
         border: solid black;
         border-width: 0 2px 2px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         position: absolute;
         top: 2px;
         left: 6px;
}

<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">

input[type=checkbox] {
         position: relative;
	       cursor: pointer;
    }
    input[type=checkbox]:before {
         content: "";
         display: block;
         position: absolute;
         width: 20px;
         height: 20px;
         top: 0;
         left: 0;
         background-color:#e9e9e9;
}
input[type=checkbox]:checked:before {
         content: "";
         display: block;
         position: absolute;
         width: 20px;
         height: 20px;
         top: 0;
         left: 0;
         background-color:#1E80EF;
}
    input[type=checkbox]:checked:after {
         content: "";
         display: block;
         width: 5px;
         height: 10px;
         border: solid white;
         border-width: 0 2px 2px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         position: absolute;
         top: 2px;
         left: 6px;
}

<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">

Etwas, das ich kürzlich für das Stylen von Optionsfeldern UND Kontrollkästchen entdeckt habe. Vorher musste ich jQuery und andere Dinge verwenden. Das ist aber blöd einfach.

input[type=radio] {
    padding-left:5px;
    padding-right:5px;
    border-radius:15px;

    -webkit-appearance:button;

    border: double 2px #00F;

    background-color:#0b0095;
    color:#FFF;
    white-space: nowrap;
    overflow:hidden;

    width:15px;
    height:15px;
}

input[type=radio]:checked {
    background-color:#000;
    border-left-color:#06F;
    border-right-color:#06F;
}

input[type=radio]:hover {
    box-shadow:0px 0px 10px #1300ff;
}

Sie können für eine Checkbox , das gleiche tun, die offensichtlich ändern input[type=radio]zu input[type=checkbox]und ändern border-radius:15px;zuborder-radius:4px; .

Hoffe das ist etwas nützlich für dich.

Klassen funktionieren auch gut, wie zum Beispiel:

<style>
  form input .checkbox
  {
    /* your checkbox styling */
  }
</style>

<form>
  <input class="checkbox" type="checkbox" />
</form>

Sie können nur auf bestimmte Attribute anwenden, indem Sie Folgendes tun:

input[type="checkbox"] {...}

Es erklärt es hier .

input[type="checkbox"] {
 /* your style */
}

Dies funktioniert jedoch nur für Browser mit Ausnahme von IE7 und darunter, für diejenigen, für die Sie eine Klasse verwenden müssen.

Trident stellt das ::-ms-checkPseudoelement für Kontrollkästchen- und Optionsfeldsteuerungen bereit . Beispielsweise:

<input type="checkbox">
<input type="radio">

::-ms-check {
    color: red;
    background: black;
    padding: 1em;
}

Dies wird in IE10 unter Windows 8 wie folgt angezeigt:

Da IE6 Attributselektoren nicht versteht, können Sie ein Skript kombinieren, das nur von IE6 (mit bedingten Kommentaren) gesehen wird, und jQuery oder IE7.js von Dean Edwards.

IE7 (.js) ist eine JavaScript-Bibliothek, mit der sich Microsoft Internet Explorer wie ein standardkonformer Browser verhält. Es behebt viele HTML- und CSS-Probleme und sorgt dafür, dass transparentes PNG unter IE5 und IE6 ordnungsgemäß funktioniert.

Die Wahl der Verwendung von Klassen oder jQuery oder IE7.js hängt von Ihren Vorlieben und Abneigungen und Ihren anderen Anforderungen ab (möglicherweise PNG-24-Transparenz auf Ihrer Website, ohne sich auf PNG-8 mit vollständiger Transparenz verlassen zu müssen, die auf 1-Bit-Transparenz in IE6 zurückgreift - nur von Fireworks und pngnq erstellt, etc)

Obwohl CSS eine Möglichkeit bietet, den für den Kontrollkästchentyp oder einen anderen Typ spezifischen Stil auszuführen, treten Probleme mit Browsern auf, die dies nicht unterstützen.

Ich denke, Ihre einzige Option in diesem Fall besteht darin, Klassen auf Ihre Kontrollkästchen anzuwenden.

Fügen Sie einfach das Kontrollkästchen class = "checkbox" zu Ihren Kontrollkästchen hinzu.

Erstellen Sie dann diesen Stil in Ihrem CSS-Code.

Eine Sache, die Sie tun könnten, ist folgende:

main.css

input[type="checkbox"] { /* css code here */ }

dh.css

.checkbox{ /* css code here for ie */ }

Verwenden Sie dann das IE-spezifische CSS-Include:

<!--[if lt IE 7]>
   <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

Sie müssen die Klasse noch hinzufügen, damit sie im IE funktioniert, und sie funktioniert nicht in anderen Nicht-IE-Browsern, die den IE nicht unterstützen. Aber es wird Ihre Website mit CSS-Code zukunftsorientiert machen und wenn der IE Unterstützung erhält, können Sie den dh spezifischen CSS-Code und auch die CSS-Klassen aus den Kontrollkästchen entfernen.