Selettore CSS per campi di immissione testo?

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

input[type=text]

oppure, per limitare gli input di testo all'interno dei moduli

form input[type=text]

o, per limitarsi ulteriormente a una determinata forma, assumendo che abbia id myForm

#myForm input[type=text]

Avviso: questo 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é viene specificato che i valori degli attributi predefiniti potrebbero non essere sempre selezionabili con i selettori di attributo, si potrebbe provare a coprire altri casi di markup per i quali vengono visualizzati gli input di 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'

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

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

Ma questo selettore sarebbe abbastanza ridicolo e anche l' elenco dei possibili tipi sta crescendo con l'aggiunta di nuove funzionalità all'HTML.

Avviso: la :notpseudo-classe è supportata solo a partire da IE9.

È possibile utilizzare il selettore di attributi qui:

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

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

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

Di solito uso selettori nel mio foglio di stile principale, quindi creo un file .js (jquery) ie6 specifico che aggiunge una classe a tutti i tipi di input. Esempio:

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

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

È possibile utilizzare il :textSelettore per selezionare tutti gli input con il tipo di testo

Fiddle di lavoro

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

:textè un'estensione jQuery e non fa parte della specifica CSS, le query che utilizzano: text non possono sfruttare il miglioramento delle prestazioni fornito dal metodo querySelectorAll () DOM nativo. Per prestazioni migliori nei browser moderni, utilizzare [type="text"]invece. Questo funzionerà per IE6+.

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

CSS

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

Ho avuto il campo di testo del tipo di input in un campo della riga della tabella. Lo sto prendendo di mira con il codice

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

Come @Amir ha pubblicato sopra, il modo migliore al giorno d'oggi - cross-browser e lasciare dietro IE6 - è usare

[type=text] {}

Nessuno ha menzionato la specificità CSS inferiore ( perché è così importante ?) Finora, [type=text] presenta 0,0,1,0 anziché 0,0,1,1 con input[type=text].

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

normalizzare v4.0.0 appena rilasciato con specificità di selettore ridotta .

Con il selettore di attributi miriamo al testo del tipo di input nei CSS

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

input [type = text]

Ciò selezionerà tutto il testo del tipo di input in una pagina Web.

I selettori di attributo vengono spesso utilizzati per gli input. Questo è l'elenco dei selettori di attributi:

[titolo] Tutti gli elementi con l'attributo titolo sono selezionati.

[title = banana] Tutti gli elementi che hanno il valore 'banana' dell'attributo title.

[title ~ = banana] Tutti gli elementi che contengono "banana" nel valore dell'attributo title.

[title | = banana] Tutti gli elementi il ​​cui valore dell'attributo title inizia con 'banana'.

[title ^ = banana] Tutti gli elementi il ​​cui valore dell'attributo title inizia con 'banana'.

[title $ = banana] Tutti gli elementi il ​​cui valore dell'attributo title termina con 'banana'.

[title * = banana] Tutti gli elementi il ​​cui valore dell'attributo title contiene la sottostringa 'banana'.

Riferimento: https://kolosek.com/css-selectors/