Como o tamanho de uma caixa de texto de entrada pode ser definido em HTML?

90

Aqui está uma caixa de texto de entrada HTML:

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

Quais são as opções para definir o tamanho da caixa?

Como isso pode ser implementado em CSS?

html css input

— osos
fonte

possível duplicata de Como defino o tamanho de uma caixa de texto HTML?

— Tony

Em alguns casos, apenas definir max-widthé suficiente

— Christophe Roussy

129

Você pode definir o seu width:

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

ou ainda melhor definir uma classe:

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

e em um arquivo CSS separado, aplique o estilo necessário:

.mytext {
    width: 300px;
}

Se você deseja limitar o número de caracteres que o usuário pode digitar nesta caixa de texto, você pode usar o maxlengthatributo:

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

— Darin Dimitrov
fonte

10

também: você pode alterar a largura em termos de "em" (e não de "px") e então o tamanho é proporcional ao tamanho da fonte da caixa de texto

— Alexander Bird

45

O sizeatributo também funciona

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

— Análise Fuzzy
fonte

8

Tente isto

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

Se não

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

com o css:

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

— Janarthanan Ramu
fonte

3

Sua resposta não adiciona nada de novo e você deve especificar as unidades (px, pt,% v, etc) em css

— Jon P

1

Bem- O font-size (style = "font-size: 18pt") era o que eu procurava e isso também aumenta o tamanho da caixa. Embora não seja explicitamente solicitado pelo OP, também agrega valor.

— Wolf5 de

Isso funcionou. Portanto, muito obrigado. No entanto, o texto parece centrar-se verticalmente. Posso evitar isso de alguma forma?

— Aaron John Sabu

@AaronJohnSabu Desculpe pela demora .. Tente aumentar o tamanho da largura .. espero que você já tenha encontrado a resposta ..

— Janarthanan Ramu

3

Você pode definir a largura em pixels por meio de estilo embutido:

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

Você também pode definir a largura com um comprimento de caractere visível:

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

— Betrice Mpalanzi
fonte

-2

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

O "tamanho" especifica a largura visível em caracteres da entrada do elemento.

Você também pode usar a altura e a largura do css.

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

— Daniel dos Santos
fonte