Il colore di sfondo dell'input distrugge lo stile?

Question

Sto creando un modulo convalidato con jQuery Validation. Voglio applicare un colore di sfondo rosso chiaro agli input che non sono validi e devono essere corretti.

Quando applico background-color: #FFCCCC; all'ingresso, lo stile accattivante sembra essere rimosso e un bordo rigido lo sostituisce. Ad esempio, con un input di testo in Firefox:

Styled and unstyled text input http://liranuna.com/strager/b/textbox-difference.png
(Live demo)

Ciò si verifica con diversi browser. Si verifica anche se imposto qualsiasi background diverso da #FFFFFF.

C'è un modo per conservare lo stile mentre si applica un colore di sfondo?

Sono aperto alle soluzioni Javascript che emulano lo stile in qualche modo.

Answer 1

Scopri quali sono gli stili per il bordo del campo di input normale. E applicalo anche a quello dell'errore.

Answer 2

Cambia il codice HTML per essere come questo:

<p><input type="text" value="text" style="border:1px solid #999999;" /></p> 
<p><input type="text" value="text" style="background-color: #FFDDDD;border:1px solid #999999;" /></p> 

Edit: Se si desidera guardare coerente in tutti i browser e non solo leggermente arrotondata in Mozilla, allora si dovrà fare molto di più lavoro. Here's a link che ti mostrerà come sovrascrivere completamente lo stile della casella di testo.

Answer 3

Qui il browser utilizza lo stile predefinito.

Suggerirei di aggiungere qualcosa come il seguente CSS a ENTRAMBI gli input, quindi sembreranno coerenti.

border: solid 1px #ccc; 

Answer 4

Direi che l'aspetto predefinito (Windows 2000) dei controlli è più semplice da implementare per i fornitori di browser. Un browser deve disegnare tutto da solo, inclusi i controlli. Il fatto che appaiano nativi nel loro stile predefinito è solo un po 'di comodità per l'utente, ma senza qualcosa di veramente stravagante (e pesante) come WPF diventa poco maneggevole per disegnare correttamente il controllo con gli stili visivi del sistema operativo e CSS applicati.

Lo stile esatto dipende anche dal sistema operativo e quindi una soluzione che ti dà esattamente un aspetto potrebbe non essere quello che la maggior parte dei visitatori del tuo sito desidera. Poi di nuovo, usando solo i CSS, puoi ottenere The One Look ™. Se questo sembra proprio quello nativo su un sistema operativo specifico, beh, allora così sia :-)

Quello che stai cercando potrebbe probabilmente essere emulato un po 'usando un bordo grigio chiaro e al passaggio del mouse/focalizzare un blu chiaro, emulando l'aspetto Aero di Vista e Windows 7.

Answer 5

Risposta breve: no.

I browser e i controlli dei moduli sono senza dubbio la parte più inconsistente dei CSS. Tutto quello che posso suggerire è di usare un bordo 1px sui campi di input, dato che la maggior parte dei browser usa qualcosa di simile a questo. Gli angoli arrotondati CSS3 dovrebbero funzionare anche su alcuni browser.

input.text { 
    border: 1px solid #ccc; 
    background-color: #fcc; 
    border-radius: 4px; 
    -moz-border-radius: 4px; 
} 

Troverete interessante this page at 456 Berea Street. Mostra come ciascun browser applica stili diversi su caselle di testo.

Answer 6

Spiacente: qualsiasi tipo di stile sugli elementi di input tende a distruggere le impostazioni predefinite del sistema operativo/browser. Gli input di default sono renderizzati in un modo completamente diverso - non è come se fossero codificati nel browser come stili CSS, sfortunatamente.

La cosa migliore da fare qui è, piuttosto che cercare di far sì che i tuoi input sullo sfondo rosso emulino quelli normali, crea il tuo stile accattivante! Se ti piacciono quei bordi chiari, usa border: 1px #ccc solid. Se ti piacciono gli angoli arrotondati, approfitta di border-radius e -moz-border-radius - per coloro che sono ai margini dello sviluppo del browser, li avranno. Per quelli che non lo sono, non noteranno la differenza.

In breve, non tentare di integrare gli input con l'ambiente del sistema operativo, ma piuttosto di adattarli all'aspetto e al layout del proprio sito. Ciò creerà un design migliore per il tuo sito web complessivo :)