Come si possono definire le dimensioni di una casella di testo di input in HTML?

90

Ecco una casella di testo di input HTML:

<input type="text" id="text" name="text_name" />

Quali sono le opzioni per definire la dimensione della scatola?

Come può essere implementato in CSS?

html css input

— osos
fonte

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

— Tony

In alcuni casi max-widthè sufficiente solo l'impostazione

— Christophe Roussy

129

Puoi impostarlo width:

<input type="text" id="text" name="text_name" style="width: 300px;" />

o meglio definire una classe:

<input type="text" id="text" name="text_name" class="mytext" />

e in un file CSS separato applica lo stile necessario:

.mytext {
    width: 300px;
}

Se desideri limitare il numero di caratteri che l'utente può digitare in questa casella di testo, puoi utilizzare l' maxlengthattributo:

<input type="text" id="text" name="text_name" class="mytext" maxlength="25" />

— Darin Dimitrov
fonte

10

inoltre: puoi cambiare la larghezza in termini di "em" (e non "px") e quindi la dimensione è proporzionale alla dimensione del carattere della casella di testo

— Alexander Bird

45

Anche l' sizeattributo funziona

<input size="25" type="text">

— Analisi fuzzy
fonte

8

Prova questo

<input type="text" style="font-size:18pt;height:420px;width:200px;">

O altro

 <input type="text" id="txtbox">

con il css:

 #txtbox
    {
     font-size:18pt;
     height:420px;
     width:200px;
    }

— Janarthanan Ramu
fonte

3

La tua risposta non aggiunge nulla di nuovo e dovresti specificare le unità (px, pt,% v, ecc.) In CSS

— Jon P

1

Bene- Il font-size (style = "font-size: 18pt") era quello che stavo cercando e questo aumenta anche la dimensione della scatola. Sebbene non esplicitamente richiesto dal PO, aggiunge anche valore.

— Wolf5

Questo ha funzionato. Quindi grazie mille. Tuttavia il testo sembra centrarsi verticalmente. Posso impedirlo in qualche modo?

— Aaron John Sabu

@AaronJohnSabu Scusa per il ritardo .. Prova ad aumentare la dimensione della larghezza .. spero tu abbia già trovato la risposta ..

— Janarthanan Ramu

3

Puoi impostare la larghezza in pixel tramite lo stile in linea:

<input type="text" name="text" style="width: 195px;">

Puoi anche impostare la larghezza con una lunghezza di caratteri visibile:

<input type="text" name="text" size="35">

— betrice mpalanzi
fonte

-2

<input size="45" type="text" name="name">

La "dimensione" specifica la larghezza visibile in caratteri dell'input dell'elemento.

Puoi anche usare l'altezza e la larghezza da css.

<input type="text" name="name" style="height:100px; width:300px;">

— Daniel dos Santos
fonte