Selettore CSS per campi di inserimento testo?

Question

Come posso indirizzare campi di input di tipo "testo" usando selettori CSS?

Answer 1

input[type=text] 

o, per limitare al testo ingressi all'interno forma

form input[type=text] 

o, per limitare ulteriormente a una certa forma, supponendo che ha id myForm

#myForm input[type=text] 

Avviso: Ciò è non supportato da IE6, quindi se si desidera sviluppare per IE6 utilizzare IE7.js (come suggerito da Yi Jiang) o iniziare ad aggiungere classi a tutti gli input di testo.

Riferimento: http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

---

Poiché it is specified quell'attributo predefinita valori possono non essere sempre selezionabile con selettori di attributo, si può tentare di coprire altri casi di marcatura per i quali sono resi ingressi testo:

input:not([type]), // type attribute not present in markup 
input[type=""], // type attribute present, but empty 
input[type=text] // type is explicitly defined as 'text' 

Ancora questo lascia il caso quando il tipo è definito, ma ha un valore non valido e che ricade ancora su type = "testo". Per coprire che potremmo usare per selezionare tutti gli ingressi che non sono uno degli altri tipi noti

input:not([type=button]):not([type=password]):not([type=submit])... 

Ma questo selettore sarebbe abbastanza ridicolo e anche il list of possible types cresce con nuove caratteristiche che viene aggiunto in HTML.

Avviso: il :not pseudo-class è supportato solo a partire da IE9.

Answer 2

È possibile utilizzare il selettore di attributo qui:

input[type="text"] { 
    font-family: Arial, sans-serif; 
} 

Questo è supportato in IE7 e superiori. È possibile utilizzare IE7.js per aggiungere supporto per questo se è necessario supportare IE6.

See: http://reference.sitepoint.com/css/attributeselector per ulteriori informazioni

Answer 3

Io di solito uso selettori nel mio foglio di stile principale, quindi creare un file .js IE6 specifici (jquery) che aggiunge una classe a tutti i tipi di ingresso. Esempio:

$(document).ready(function(){ 
    $("input[type='text']").addClass('text'); 
)}; 

E quindi basta duplicare i miei stili nello specifico foglio di stile ie6 utilizzando le classi. In questo modo il markup effettivo è un po 'più pulito.

Answer 4

È possibile utilizzare :text Selector per selezionare tutti gli ingressi di tipo testo

Working Fiddle

$(document).ready(function() { 
    $(":text").css({ //or $("input:text") 
     'background': 'green', 
     'color':'#fff' 
    }); 
}); 

:text è un'estensione jQuery e non fa parte della specifica CSS, query utilizzando: il testo non può usufruire del potenziamento delle prestazioni fornito dal metodo nativo DOM querySelectorAll().Per prestazioni migliori nei browser moderni, utilizzare invece [type="text"]. Funzionerà per IE6+.

$("[type=text]").css({ // or $("input[type=text]") 
    'background': 'green', 
    'color':'#fff' 
}); 

CSS

[type=text] // or input[type=text] 
{ 
    background: green; 
} 

Answer 5

Come @Amir postato sopra, il modo migliore al giorno d'oggi - cross-browser e lasciando dietro di IE6 - è quello di utilizzare

[type=text] {} 

nessuno ha menzionato inferiore CSS specificità (whyisthatimportant?) finora, [type=text]features 0,0,1,0 invece di 0,0,1,1 con input[type=text].

Per quanto riguarda le prestazioni, non c'è più alcun impatto negativo.

normalize v4.0.0 appena rilasciato with lowered selector specificity.

Answer 6

Avevo il campo di testo del tipo di input in un campo di riga della tabella. Sto bersaglia con il codice di

.admin_table input[type=text]:focus 
{ 
    background-color: #FEE5AC; 
} 

Answer 7

Con selettore di attributo puntiamo tipo di input testo in CSS

input[type=text] { 
background:gold; 
font-size:15px; 
}