Checkbox-Aussehen in Opera

Question

Ich habe eine Seite mit dunklem Hintergrund. In IE, Firefox, Chrome und Safari sehen meine Kontrollkästchen so aus:

Aber Opera zeigt die Kontrollkästchen so an:

Daher kann der Benutzer nicht sehen, ob er das Kontrollkästchen aktiviert hat, weil das Häkchen schwarz ist.

Hier ist ein Teil meines CSS:

body {
    background-attachment: fixed;
    background-color: #07080A;
    background-image: url('images/bg.jpg');
    background-position: center top;
    background-repeat: no-repeat;
    border: 0 none;
    color: #FFFFFF;
    display: block;
    font-family: Arial;
    font-size: 13px;
    margin: auto auto;
    width: 1000px;
}

input, textarea {
    width: 300px;
    color: #fff;
    background-color: #323232;
    border: none;
    font-size: 13px;
    font-family: Arial;
    padding: 8px 0px 8px 10px;
}

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

Wie kann ich das ändern? Ich möchte das Aussehen des Kontrollkästchens in Opera und anderen Browsern gleich haben.

Answer 1

Versuchen Sie, Ihren ersten Stil mit folgendem zu überschreiben:

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

Dadurch erhält das Kontrollkästchen den Hintergrund seines Elternelements. Je nach Reihenfolge Ihrer Regeln und anderer Regeln müssen Sie möglicherweise inherit !important verwenden.

Answer 2

In Opera gilt die Hintergrund-Eigenschaft für den Hintergrund innerhalb des Kontrollkästchens und nicht für den Hintergrund außerhalb des Kontrollkästchens. Ich glaube, was du zu beheben versuchst, sind einige der Probleme, die du auf dieser Seite findest, wie hier beschrieben, wie Kontrollkästchen gestaltet werden.

Answer 3

input[type="checkbox"]{
    backgorund: #fff;
    width: 30px;
}

Funktioniert das nicht für dich?

Answer 4

Zunächst haben Sie einen Tippfehler in Ihrer input[type="checkbox"]-Linie.

Zweitens könnten Sie laut diesem die Hintergrundfarbe des Kontrollkästchens explizit auf weiß setzen. Dies funktioniert in Opera.