Radio-Button-Styling

Ich will style radio-buttons mit reinem CSS, ohne Klassen oder IDs. Nur input[type=radio].
Ich will ein Hintergrundbild deaktiviert und aktiviert.
Jedoch, die -vendor-appearance:none; funktioniert nicht mit Trident oder Gecko. Nur Webkit.
In diesen Browsern können Sie sehen, die hintergrund-Bild als hintergrund auf den radio-button aber der button ist immer noch da, anstatt nur das Bild anzeigen, wie kann ich loswerden der button, also nur das hintergrund Bild angezeigt. Die Geige: http://jsfiddle.net/7kScn/

InformationsquelleAutor henryaaron | 2011-12-16
  1. 8

    Können Sie mit einem CSS2-Selektor trick, um eine Verbindung zu einer Funk-Gruppe und andere Sachen sofort nach.

    Finden Sie unter: http://jsfiddle.net/7kScn/1/

    Es ist nur ein einfaches Beispiel, aber es arbeitet auf der Prämisse, versteckt sich das Eingabefeld und dann styling das label sofort nach, indem es die Wirkung, dass es die eigentliche Sache ist, die Sie überprüfen.

    • CSS3? 🙁 es ist eine E-Commerce Website, ist keine der Funktionen kann auf der Grundlage einer CSS3-nur der Stil. Wenn es fällt wieder auf, nur die Anzeige der Checkboxen, wie es normalerweise tun würde als das ist akzeptabel, aber wenn Sie anrufen display:none; als ich kann nicht wirklich verwenden.
    • Nach diese Kompatibilität chart, diese spezifische Auswahl sollte funktionieren, in seinem aktuellen Zustand. Es ist nur im IE6 nicht unterstützt (die Notizen über statische für IE7/8 nicht auf dieses it-Einsatz). Es scheint CSS2 (?).
    • Aber meine Website nicht verwenden Sie Etiketten, wie würde es funktionieren ohne das + label
    • Sie können nicht entfernen Sie die eigentliche box aus mit CSS, das ist das, was die radio/checkbox ist. Die einzige andere Lösung wäre die Verwendung von JavaScript zum ändern der HTML da, um Ihnen Lust.
    • Gerade überprüft mit Adobe BrowserLab, funktioniert im IE7 + IE6 fällt zurück auf standard-Sichtbarkeit. Das ist großartig, jetzt noch was zu den Etiketten gibt es eine Abhilfe?
    InformationsquelleAutor animuson
  2. 1

    Ist diese von nutzen?
    input[type=radio]:checked {
    border: 1px solid black;
    }

    InformationsquelleAutor James Alarie
  3. 0

    Schrieb ich ein tutorial über das anpassen von Checkboxen und radios mit nur CSS, sowie das erstellen von on/off-Schalter mit styling das Etikett und verwenden es :before und :after pseudoclasses. Vielleicht hilft dies ja 🙂 Lesen Sie hier: http://blog.felixhagspiel.de/index.php/posts/custom-inputs

    InformationsquelleAutor Felix Hagspiel
Schreibe einen Kommentar