Anwenden eines Rahmens auf ein Kontrollkästchen in Chrome
Ich habe viele Formulare auf meiner Website, wobei natürlich viele Felder in ihnen benötigt werden. Wenn das erforderliche Feld leer gelassen wird, wird ihm eine Fehlerklasse zugewiesen, und ich versuche, das Feld in rot einzukreisen, unabhängig davon, ob es sich um ein Textfeld, ein Dropdown-Menü oder ein Kontrollkästchen handelt. Ich habe den folgenden Code in meiner CSS-Datei:
%Vor%Nun komischerweise funktioniert das im IE gut, aber in Chrome sind die Checkboxen nicht rot eingekreist, obwohl ich sehen kann, dass das CSS auf sie angewendet wird, wenn ich das Element untersuche.
Und das kann irrelevant sein, wenn der obige css-Code aktiv ist, aber ich habe etwas anderes in meiner CSS-Datei:
%Vor%Und das wird verwendet, damit die Kontrollkästchen in IE8 und weniger korrekt angezeigt werden.
Irgendwelche Ideen, wie ich den roten Rahmen in Chrome visualisieren kann?
BEARBEITEN: Hier ist ein Spiel: Ссылка
3 Antworten
Mach es einfach so (deine Selektoren waren falsch: .error input, .error select, .error textarea ):
%Vor%Hier ist jsFiddle
Speziell für ein Kontrollkästchen verwenden Sie outline: 2px solid #F00; , BEACHTEN Sie jedoch, dass der Rahmen weiterhin sichtbar ist. Es ist schwierig und unzuverlässig, Eingabefelder so zu gestalten, dass sie über mehrere Browser hinweg gut aussehen.
Für ein vollständig benutzerdefiniertes Kontrollkästchen finden Sie in diesem jsFiddle von diesem Gist .
BEARBEITEN Wiedergabe mit: outline-offset: 10px;
Kontrollkästchen und Radio Button CSS Styling Border ohne Bild oder Inhalt. Nur reines CSS.
JSFiddle Link hier
%Vor%Funktioniert für mich.einfacher Umriss funktioniert nicht.
input[type=checkbox].has-error{
outline: 1px solid red !important;
}
Tags und Links css google-chrome checkbox border