Checkbox Breite/Höhe nicht ändern bei neueren Browsern

Ich arbeite auf einer Website, die Bedürfnisse zu Abschnitt 508-konform, so dass ich dachte, die Erhöhung der Größe der Checkboxen nützlich wäre, irgendwelche der Sehbehinderten hatte noch eine vision. Check-out dieser Screenshot aus Chrome 15 (versus Chrome-16):

Checkbox Breite/Höhe nicht ändern bei neueren Browsern

Dies ist die gleiche css, die passiert werden:

input[type="checkbox"] {
  width: 30px;
  height: 30px;
}

Wie Sie sehen können die Breite und Höhe sehr unterschiedlich interpretiert. Weiss jemand, wie man diese Arbeit mit beiden Browsern? (IE9 tut die gleiche Sache auf der rechten Seite auch).

InformationsquelleAutor aarona | 2012-02-04
  1. 2

    Es ist wirklich nicht cross-browser-Lösung (das ist ein Alter Artikel, aber immer noch gut und relevant) mit einer tatsächlichen checkbox. Es gibt tricks, die Sie verwenden können, in CSS3. Der, den ich verwenden ist nicht sehr browser-freundliche (benötigt einen neueren browser), aber es gibt andere Wege, die ein wenig mehr cross-browser-freundlich, noch immer nicht zu 100% aber. Ich bezweifle, Sie werden nichts finden, das unterstützt der IE6 zum Beispiel.

    Etwas wie dieses:

    input.checkbox { display: none }
input.checkbox + label > span.checkbox-span { display: inline-block; color: #FFF; border: 1px solid #000; width: 30px; line-height: 30px; font-size: 24px; text-align: center }
input.checkbox:checked + label > span.checkbox-span { color: #000 }
    <input type="checkbox" class="checkbox" id="check_1" />
<label for="check_1"><span class="checkbox-span">✓</span> Text describing checkbox #1</label>

    Das ist ein sehr einfaches Beispiel. Siehe jsFiddle.

    • Ich kümmern sich nicht um IE6. Ich werde ihm eine Chance geben und Sie wissen lassen.
    • Getestet auf Firefox, Chrome & IE, es läuft richtig ohne JavaScript.
    InformationsquelleAutor animuson
Schreibe einen Kommentar