Applicazione del bordo a una casella di controllo in Chrome

Question

Ho molti moduli sul mio sito Web con, ovviamente, molti dei campi in essi richiesti. Se il campo richiesto viene lasciato vuoto, viene assegnata una classe di 'errore' e sto cercando di circondare il campo in rosso, indipendentemente dal fatto che si tratti di un campo di testo, di un menu a discesa o di una casella di controllo. Ho il seguente codice nel mio file css:

.error input, .error select, .error textarea { 
    border-style: solid; 
    border-color: #c00; 
    border-width: 2px; 
} 

Ora stranamente che funziona bene in IE, ma in Chrome le caselle non sono cerchiati in rosso anche se posso vedere che il CSS è applicato a loro quando si controlla il elemento.

E questo potrebbe essere irrilevante il codice css sopra è attiva, ma io ho qualcosa di diverso nel mio file css:

input[type=checkbox] { 
    background:transparent; 
    border:0; 
    margin-top: 2px; 
} 

E che viene utilizzato in modo che le caselle di controllo vengono visualizzati correttamente in IE8 e meno.

Qualche idea su come visualizzare il bordo rosso in Chrome?

EDIT: Ecco un jsfiddle: http://jsfiddle.net/PCD6f/3/

Answer 1

solo farlo in questo modo (i vostri selettori erano sbagliati: .error ingresso, .error selezionare, .error textarea):

input[type=checkbox] { 
    outline: 2px solid #F00; 
} 

Ecco il jsFiddle

In particolare per un ch eckbox usa outline: 2px solid #F00;, MA tieni presente che il bordo sarà ancora visibile. Disegnare i campi di input per guardarli bene attraverso più browser è difficile e inaffidabile.

Per una casella di controllo in stile completamente personalizzato, vedere questo jsFiddle da questo Gist.

EDIT Giocare con: outline-offset: 10px;

Answer 2

Casella di controllo, e Radio Border Styling pulsante CSS senza alcuna immagine o contenuto. Solo puro css.

JSFiddle collegamento here

input[type="radio"]:checked:before { 
display: block; 
height: 0.4em; 
width: 0.4em; 
position: relative; 
left: 0.4em; 
top: 0.4em; 
background: #fff; 
border-radius: 100%; 
content: ''; 
} 

/* checkbox checked */ 
input[type="checkbox"]:checked:before { 
content: ''; 
display: block; 
width: 4px; 
height: 8px; 
border: solid #fff; 
border-width: 0 2px 2px 0; 
-webkit-transform: rotate(45deg); 
transform: rotate(45deg); 
margin-left: 4px; 
margin-top: 1px; 
} 

Answer 3

Lavori per la sagoma me.only non funziona.

input[type=checkbox].has-error{ outline: 1px solid red !important; }