Come posso indirizzare i campi di inserimento del testo con i CSS?

Question

Diciamo che avete il seguente codice HTML:

<input /> 
<br /> 
<input type=text /> 

Naturalmente, nel mio HTML io avrò altro tipo di campi di input, come pure (caselle di controllo, ecc). Ora voglio modellare solo gli input di testo.

Quello che trovo durante la ricerca, è quello di fare quanto segue in CSS:

input[type=text] { background: red; } 

Per il secondo ingresso, in cui l'attributo è esplicitamente presente, questo funziona. Per il primo tuttavia, funziona in IE8, ma non in IE10. Inoltre non in Chrome.

Quindi, come posso indirizzare tutti i campi di immissione del testo e solo il campo di inserimento del testo, senza dover inserire type=text ovunque?

È possibile vedere questo in un jsFiddle. Per IE8, controlla these instructions su come raggiungere jsFiddle al lavoro, ma sembra che questo:

Answer 1

Se si vuole essere in grado di omettere lo type="text" e avere ancora la corrispondenza del selettore , si dovrà utilizzare il not psuedoselector disponibili in CSS3:

input[type="text"], input:not([type]) { 
    ... 
} 

http://jsfiddle.net/dByqP/5/

Questo non funziona nelle versioni inferiori di IE, come CSS3 non è ben supportato in questi browser.

La soluzione migliore sarebbe quella di passare e aggiungere type="text" agli input di testo e utilizzare solo il selettore originale.

Answer 2

Un doloroso, ma certo modo potrebbe fare è quello di impostare lo stile su semplicemente

input { 
    /* ... */ 
} 

quali dovrebbero essere destinati l'immissione di testo in tutti i browser, allora si potrebbe fare quello che stavano facendo, e indirizzare ogni singolo tipo di input che non è un input di testo:

input[type=range] {} 
input [type=phone] {} 
// etc. 

In questo modo, anche se l'operatore: not disponibile nei CSS3 non è supportato da un browser, è ancora possibile farlo funzionare ...

Answer 3

Style l'ingresso utilizzando una classe e CSS:

.redBG 
{ 
    background: red; 
} 

Allora il vostro HTML è:

<input class="redBG" /> 

Attached jsFiddle.

Answer 4

Il mio suggerimento sarebbe quello di avere lo stile di default per l'ingresso sia

input { 
    background-color: red; 
} 

poi sovrascrivere lo stile per qualcos'altro, se necessario, ad esempio un pulsante blu

input[type='button'] { 
    background-color: blue; 
} 

naturalmente si avrebbe bisogno per andare e specificare stili specifici per specifici tipi di input, ma questo non significa che non lo avresti fatto comunque, se per esempio volevi un pulsante univoco.