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

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

Usa solo:

textarea {
    width: 200px;
}

o

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

A seconda di cosa intendi per "casella di testo".

Il tuo markup:

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

Il CSS:

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

Tieni presente che la dimensione della casella di testo è una "vittima" del modello di casella W3C . Quello che intendo per vittima è che l'altezza e la larghezza di una casella di testo sono la somma delle proprietà altezza / larghezza assegnate sopra, oltre all'altezza / larghezza del riempimento e alla larghezza del bordo. Per questo motivo, le tue caselle di testo avranno dimensioni leggermente diverse nei diversi browser a seconda del riempimento predefinito nei diversi browser. Sebbene browser diversi tendano a definire un riempimento diverso per le caselle di testo, la maggior parte dei fogli di stile di ripristino non tende a includere <input />tag nei fogli di ripristino, quindi questo è qualcosa da tenere a mente.

Puoi standardizzarlo definendo la tua imbottitura. Ecco il tuo CSS con il riempimento specificato, quindi la casella di testo ha lo stesso aspetto in tutti i browser:

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

Ho aggiunto 1 pixel padding perché alcuni browser tendono a rendere la casella di testo troppo piena se il padding è 0px. A seconda del design, potresti voler aggiungere ancora più imbottitura, ma ti consigliamo vivamente di definirla tu stesso, altrimenti lascerai che siano diversi browser a decidere da soli. Per una coerenza ancora maggiore tra i browser, dovresti anche definire il bordo da solo.

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

Il codice della tua casella di testo:

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

Il tuo codice CSS:

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

o

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

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

Questo funziona per me in IE 10 e FF 23

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

Se non desideri utilizzare il metodo di classe, puoi utilizzare il metodo genitore-figlio per apportare modifiche nella casella di testo.

Per es. Ho creato 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.

Attenzione! L'attributo width è ritagliato dall'attributo max-width. Quindi 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>

Provare:

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

In questo modo rimane indipendente dalla dimensione del testo impostata per la casella di testo. Stai aumentando l'altezza usando invece il riempimento

Prova questo codice:

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

In questo modo rimane indipendente dalla dimensione del testo impostata per la casella di testo. Stai aumentando l'altezza usando invece il riempimento.

Gli elementi possono essere ridimensionati con gli attributi heighte width.

È possibile impostare la larghezza di input dipendente rispetto alla larghezza del contenitore.

.container {
   width: 360px;
}

.container input {
   width: 100%;
}