¿Cómo se puede definir el tamaño de un cuadro de texto de entrada en HTML?

90

Aquí hay un cuadro de texto de entrada HTML:

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

¿Cuáles son las opciones para definir el tamaño de la caja?

¿Cómo se puede implementar esto en CSS?

html css input

— osos
fuente

posible duplicado de ¿Cómo configuro el tamaño de un cuadro de texto HTML?

— Tony

En algunos casos, la configuración max-widthes suficiente

— Christophe Roussy

129

Puedes configurar su width:

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

o incluso mejor definir una clase:

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

y en un archivo CSS separado aplique el estilo necesario:

.mytext {
    width: 300px;
}

Si desea limitar la cantidad de caracteres que el usuario puede escribir en este cuadro de texto, puede usar el maxlengthatributo:

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

— Darin Dimitrov
fuente

11

también: puede cambiar el ancho en términos de "em" (y no "px") y luego el tamaño es proporcional al tamaño de fuente del cuadro de texto

— Alexander Bird

45

El sizeatributo también funciona

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

— Análisis difuso
fuente

¿En qué unidades se mide normalmente este atributo de tamaño?

— Thomas Kimber

8

Prueba esto

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

Si no

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

con el css:

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

— Janarthanan Ramu
fuente

3

Su respuesta no agrega nada nuevo y debe especificar unidades (px, pt,% v, etc.) en css

— Jon P

1

Bueno, el font-size (style = "font-size: 18pt") era el que estaba buscando y eso también aumenta el tamaño de la caja. Aunque el OP no lo pide explícitamente, también agrega valor.

— Wolf5

Esto funcionó. De ahí muchas gracias. Sin embargo, el texto parece centrarse verticalmente. ¿Puedo prevenir esto de alguna manera?

— Aaron John Sabu

@AaronJohnSabu Perdón por la demora .. Intenta aumentar el tamaño del ancho .. espero que ya hayas encontrado la respuesta ..

— Janarthanan Ramu

3

Puede establecer el ancho en píxeles mediante el estilo en línea:

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

También puede establecer el ancho con una longitud de carácter visible:

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

— betrice mpalanzi
fuente

-2

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

El "tamaño" especifica el ancho visible en caracteres de la entrada del elemento.

También puede usar la altura y el ancho de css.

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

— Daniel dos Santos
fuente