Setze den Eingabestil für Checkboxen in IE zurück
Ich habe eine CSS-Regel für die Eingabe wie folgt:
%Vor%Das Problem ist, dass die Checkboxen im IE (haben auf IE 8 und 9 getestet) und Opera auch diesen Rahmen erben und anstelle des Standardstils zeigen sie ihren benutzerdefinierten Modus für Checkboxen mit weißem Hintergrund und schwarzen Checks wie folgt:
anstelle des nativen Stils, wie in Windows 7 mit Hintergrund mit grauem Hintergrund und dunkelblauen Überprüfungen, die in Chrome und Firefox angezeigt werden:
Ich möchte den Rahmen für die Eingabe-Regel in der CSS behalten, aber ich habe eine Klasse namens "Checkbox", die ich auf alle Kontrollkästchen wie folgt setzen:
%Vor%Gibt es eine Möglichkeit, den Rahmenstil mit der Checkbox-Regel zurückzusetzen?
Ich habe es versucht:
%Vor%funktioniert in Opera, um zum Standardstil zurückzukehren, aber nicht im IE. Ich habe auch viele verschiedene Kombinationen ausprobiert:
%Vor%, aber keiner davon scheint auf den Standard-Stil der Checkboxen in IE zurückzusetzen.
Ist es möglich, den Standard-Stil für Checkboxen im IE wiederherzustellen, ohne den Rahmen für die Eingabe-Regel zu entfernen und stattdessen die .Checkbox-Klasse zu verwenden?
3 Antworten
In vielen Browsern ist es nicht möglich, das Kontrollkästchen auf den standardmäßigen nativen Stil zurückzusetzen.
Dies ist wahrscheinlich der Grund, warum CSS-Resets im Allgemeinen keine entsprechende Regel enthalten:
%Vor%Die kompatibelste Methode ist dies:
%Vor% und listet explizit alle type von input auf, die Sie stylen möchten.
Siehe: Ссылка
Dies funktioniert in IE7 + und allen modernen Browsern.
Sie könnten dies auch besser mit der Pseudo-Klasse not() CSS3 machen, aber das funktioniert nicht in IE8, was für mich ein Deal-Breaker ist:
Falls Sie sich immer noch fragen, ob es tatsächlich eine Möglichkeit gibt, Checkboxen zu stylen und sie in den meisten Browsern, einschließlich IE, funktionieren zu lassen. Und Sie brauchen nur etwas CSS und nur ein wenig Javascript und Jquery. Funktioniert in IE6 +
Setzen Sie Ihre Checkbox zuerst so. Fügen Sie nur ein Label-Element mit dem for-Element hinzu, das auf die ID der Checkbox zeigt.
%Vor%Als nächstes schließen Sie einige CSS ein:
%Vor%Zeichnen Sie Ihre Checkbox mit Ihrem Label-Steuerelement, hier ist eine, die ich gemacht habe:
%Vor%Sie müssen einen Blick darauf werfen, wenn das Kontrollkästchen aktiviert ist:
%Vor%Endlich etwas jquery:
%Vor%Vergessen Sie nicht, die jquery-Bibliotheken einzuschließen (legen Sie dies in Ihrem head-Tag ab):
%Vor%Schau dir die Geige an, um sie in Aktion zu sehen: Geige
Tags und Links internet-explorer css html5 checkbox