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

Question

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

Answer 1

sólo tiene que utilizar:

textarea { 
    width: 200px; 
} 

o

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

Dependiendo de lo que entendemos por 'cuadro de texto'.

Answer 2

su margen de beneficio:

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

El CSS:

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

Tenga en cuenta que el tamaño del cuadro de texto es una "víctima" de la W3C box model. Lo que quiero decir con víctima es que la altura y el ancho de un cuadro de texto es la suma de las propiedades de altura/ancho asignadas anteriormente, además de la altura/ancho del relleno y el ancho del borde. Por esta razón, sus cuadros de texto tendrán tamaños ligeramente diferentes en diferentes navegadores dependiendo del relleno predeterminado en diferentes navegadores. Aunque diferentes navegadores tienden a definir diferentes rellenos para cuadros de texto, la mayoría de reset style sheets no suelen incluir etiquetas <input /> en sus hojas de restablecimiento, por lo que esto es algo a tener en cuenta.

Puede estandarizar esto definiendo su propio relleno. Aquí está el código CSS con relleno especificado, por lo que el cuadro de texto se ve igual en todos los navegadores:

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

añadí 1 de relleno de píxeles debido a que algunos navegadores tienden a hacer que el cuadro de texto parece demasiado abarrotado si el relleno es 0px. Dependiendo de su diseño, es posible que desee agregar aún más relleno, pero es muy recomendable que defina el relleno usted mismo, de lo contrario lo dejará en manos de diferentes navegadores para que lo decidan por sí mismos. Para una mayor coherencia entre los navegadores, también debe definir el borde usted mismo.

Answer 3

Los elementos se pueden clasificar con los atributos height y width.

Answer 4

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

Answer 5

Probar:

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

Ésta es la manera que sigue siendo independiente de lo que textsize se ha fijado para el cuadro de texto. Que están aumentando la altura utilizando relleno en lugar

Answer 6

probar este código:

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

De esta manera se mantiene independiente de lo que textsize se ha fijado para el cuadro de texto. En su lugar, estás aumentando la altura con relleno.

Answer 7

Su código de cuadro de texto:

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

Su código CSS:

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

o

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

Por lo tanto, primero seleccione el elemento con atributos (mira primer ejemplo) o clases (mira el último ejemplo). Más tarde, le asigna valores de altura y ancho a su elemento.

Answer 8

Esto funciona para mí en IE y FF 10 23

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

Answer 9

Si no desea utilizar el método de la clase se puede utilizar el método de padre-hijo para hacer cambios en el cuadro de texto.

Por ej. He hecho un formulario en mi formulario div.

HTML Code:

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

Ahora código CSS será como:

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

Problema resuelto.

Answer 10

Lookout! El atributo de ancho está recortado por el atributo de ancho máximo. por lo que utiliza ....

<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

Si desea limitar el no: de letras en este cuadro de texto utilizan: maxlength = "10" dentro de la etiqueta de entrada