Come si imposta la dimensione di una casella di testo HTML?

Question

Come si imposta la dimensione di una casella di testo HTML?

Answer 1

Basta usare:

textarea { 
    width: 200px; 
} 

o

input[type="text"] { 
    width: 200px; 
} 

A seconda di cosa si intende per 'testo'.

Answer 2

tuo markup:

<input type="text" class="resizedTextbox" /> 

Il CSS:

.resizedTextbox {width: 100px; height: 20px} 

Tenete presente che la dimensione casella di testo è una "vittima" del W3C box model. Quello che intendo per vittima è che l'altezza e la larghezza di una casella di testo è la somma delle proprietà altezza/larghezza assegnate sopra, oltre all'altezza/larghezza del riempimento e alla larghezza del bordo. Per questo motivo, le caselle di testo avranno dimensioni leggermente diverse in browser diversi a seconda del riempimento predefinito nei diversi browser. Sebbene diversi browser tendano a definire padding diversi in caselle di testo, la maggior parte dei reset style sheets non tende ad includere i tag <input /> nei loro fogli di ripristino, quindi questo è qualcosa da tenere a mente.

È possibile standardizzare questo definendo il proprio riempimento. Ecco il vostro CSS con imbottitura specificato, in modo che la casella di testo ha lo stesso aspetto in tutti i browser:

.resizedTextbox {width: 100px; height: 20px; padding: 1px} 

ho aggiunto 1 pixel imbottitura perché alcuni browser tendono a rendere la casella di testo sembra troppo stipato se l'imbottitura è 0px. A seconda del tuo progetto, potresti voler aggiungere ancora più padding, ma ti consigliamo vivamente di definire il padding da solo, altrimenti lo lascerai a diversi browser per decidere da solo. Per una maggiore uniformità tra i browser, devi definire anche tu il bordo.

Answer 3

Gli elementi possono essere dimensionati con gli attributi height e width.

Answer 4

input[type="text"] 
{ 
    width:200px 
} 

Answer 5

Prova:

input[type="text"]{ 
padding:10px 0;} 

Questo è il modo rimane indipendente da ciò che TEXTSIZE è stato impostato per la casella di testo. Si stanno aumentando l'altezza utilizzando padding invece

Answer 6

provare questo codice:

input[type="text"]{ 
padding:10px 0;} 

In questo modo rimane indipendente da ciò che TEXTSIZE è stato impostato per la casella di testo. Stai invece aumentando l'altezza usando il padding.

Answer 7

Il codice testo:

<input type="text" class="textboxclass" /> 

il codice CSS:

input[type="text"] { 
height: 10px; 
width: 80px; 
} 

o

.textboxclass { 
height: 10px; 
width: 80px; 
} 

Quindi, prima si seleziona il vostro elemento con gli attributi (guarda primo esempio) o classi (guarda l'ultimo esempio). Successivamente, assegni i valori di altezza e larghezza al tuo elemento.

Answer 8

Questo funziona per me in IE 10 e 23 FF

<input type="text" size="100" /> 

Answer 9

Se non si desidera utilizzare il metodo di classe è possibile utilizzare il metodo genitore-figlio di apportare modifiche nella casella di testo.

Ad es. Ho fatto un modulo nel mio modulo div.

codice HTML:

<div class="form"> 
<textarea name="message" rows="10" cols="30" >Describe your project in detail.</textarea> 
</div> 

Ora il codice CSS sarà come:

.form textarea{ 
    height: 220px; 
    width: 342px; 

Problema risolto.

Answer 10

Lookout! L'attributo width viene troncato dall'attributo max-width. Così ho usato ....

<form method="post" style="width:1200px"> 
    <h4 style="width:1200px">URI <input type="text" name="srcURI" id="srcURI" value="@m.SrcURI" style="width:600px;max-width:600px"/></h4> 

Answer 11

Se si desidera limitare il no: delle lettere in testo utilizzano questo: maxlength = "10" dentro tag input