it-swarm.dev

Selettore CSS per i campi di inserimento del testo?

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

342
Yarin
input[type=text]

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

form input[type=text]

o, per restringere ulteriormente a un certo modulo, 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é è 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 gli input di testo sono resi:

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'

Rimane comunque il caso quando il tipo è definito, ma ha un valore non valido e ricade ancora su type = "text". Per coprire 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 la lista dei possibili tipi sta crescendo con nuove funzionalità aggiunte all'HTML.

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

630
Alin Purcaru

Puoi usare il selettore degli 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. 

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

37
Yi Jiang

Di solito uso i selettori nel mio foglio di stile principale, quindi creo un file .js (jquery) specifico per ie6 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 nello specifico foglio di stile ie6 usando le classi. In questo modo il markup effettivo è un po 'più pulito.

14
garrettwinder

Puoi usare :text Selector per selezionare tutti gli input con testo tipo

Lavorare Fiddle

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

:text è un'estensione jQuery e non fa parte delle specifiche CSS, le query utilizzano: il testo non può trarre vantaggio dall'aumento delle prestazioni fornito dal metodo nativo DOM querySelectorAll (). Per prestazioni migliori nei browser moderni, utilizza 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;
}
6
Aamir Shahzad

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

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

Come @Amir pubblicato sopra, il modo migliore oggi - cross-browser e lasciandosi alle spalle IE6 - è quello di utilizzare

[type=text] {}

Nessuno ha menzionato la specificità CSS più bassa ( perchéèthatimportant ?) 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. 

normalizza v4.0.0 appena rilasciato con specificità del selettore abbassato .

0
Volker E.

Con il selettore di attributi, il testo del tipo di input viene indirizzato in CSS

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

input [type = text]

Questo selezionerà tutto il testo del tipo di input in una pagina web.

0
Navneet Kumar