Checkbox's Umriss wird nicht in Chrom angezeigt

Question

Wir wünschten Chrome wäre besser, aber die Realität ist, dass es immer noch nicht so gut ist wie Firefox.

.blue { 
 
    outline: thin dotted yellow; 
 
    outline-offset: -2px 
 
}

<input class="blue" type="checkbox">

Bin ich etwas fehlt?

Answer 1

Sie falsch Eigenschaft Auftrag haben, korrekt ist:

.blue { 
    outline: yellow dotted thin; 
    outline-offset: -2px 
} 

Sie Chrome nicht für etwas verantwortlich machen sollte, das ist deine Schuld ...

Answer 2

Sie diesen Hack verwenden können, die in IE funktioniert und in Chrome, soll das aber eigentlich nicht, denn checkbox hat keinen Inhalt und kann daher keinen ::before haben.

.page input[type=checkbox].form-input-error:not([disabled])::before { 
    content: ' '; 
    background: transparent; 
    border: 3px solid crimson; 
    display: inline-block; 
    width: 100%; 
    height: 100%; 
    padding: 0; 
    margin: -3px -3px; 
} 

Was es tut:

• Fügt 3px roten Rand
• Wenn Checkbox nicht
• deaktiviert ist, wenn es eine Klasse namens .form-input-error

Answer 3

hat prüfe ich es auf Chrom . es ist in Ordnung. dies wie:

.blue { 
 
    outline: yellow dotted thin; 
 
    -webkit-outline: yellow dotted thin; 
 
    outline-offset: -2px 
 
}

<input class="blue" type="checkbox">