html style - Selettore CSS per campi di input di testo?




custom width (9)

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


Answers

I selettori di attributo sono spesso usati per gli input. Questa è la lista dei selettori di attributi:

[title] Tutti gli elementi con l'attributo title 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/


È possibile utilizzare :text selettore di :text per selezionare tutti gli input con testo tipo

Fiddle che lavora

$(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, usa invece [type="text"] . Questo funzionerà per IE6+ .

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

CSS

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

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à dei CSS ( why is that important ?) 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 .


input [type = text]

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


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;
}

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

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

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


input[type=text]

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

form input[type=text]

o, per limitare 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 selettori di attributi, 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 l' elenco dei possibili tipi sta crescendo con nuove funzionalità aggiunte all'HTML.

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


Che ne dici di qualcosa del genere per testi più brevi?

Potrebbe anche funzionare per un testo più lungo se hai fatto qualcosa con un ciclo, ripetendo i caratteri con JavaScript. Ad ogni modo, il risultato è qualcosa del genere:

p.char {
  position: relative;
  display: inline-block;
  font-size: 60px;
  color: red;
}

p.char:before {
  position: absolute;
  content: attr(char);
  width: 50%;
  overflow: hidden;
  color: black;
}
<p class="char" char="S">S</p>
<p class="char" char="t">t</p>
<p class="char" char="a">a</p>
<p class="char" char="c">c</p>
<p class="char" char="k">k</p>
<p class="char" char="o">o</p>
<p class="char" char="v">v</p>
<p class="char" char="e">e</p>
<p class="char" char="r">r</p>
<p class="char" char="f">f</p>
<p class="char" char="l">l</p>
<p class="char" char="o">o</p>
<p class="char" char="w">w</p>





html css forms css-selectors html-input