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

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

Solo usa:

textarea {
    width: 200px;
}

o

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

Dependiendo de lo que quieras decir con 'cuadro de texto'.

Tu marcado:

<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" del modelo de cuadro W3C . 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 alto / ancho asignadas anteriormente, además de la altura / ancho del relleno y el ancho del borde. Por esta razón, sus cuadros de texto serán de tamaños ligeramente diferentes en diferentes navegadores, dependiendo del relleno predeterminado en diferentes navegadores. Aunque los diferentes navegadores tienden a definir un relleno diferente para los cuadros de texto, la mayoría de las hojas de estilo de restablecimiento no suelen incluir<input /> etiquetas en sus hojas de restablecimiento, por lo que esto es algo a tener en cuenta.

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

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

Agregué un relleno de 1 píxel porque algunos navegadores tienden a hacer que el cuadro de texto parezca demasiado abarrotado si el relleno es de 0 px. Dependiendo de su diseño, es posible que desee agregar aún más relleno, pero se recomienda encarecidamente que defina el relleno usted mismo, de lo contrario, dejará que los diferentes navegadores decidan por sí mismos. Para una mayor coherencia entre los navegadores, también debe definir el borde usted mismo.

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

Su código de cuadro de texto:

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

Tu código CSS:

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

o

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

Entonces, primero selecciona su elemento con atributos (vea el primer ejemplo) o clases (vea el último ejemplo). Más tarde, asigna valores de alto y ancho a su elemento.

Esto me funciona en IE 10 y FF 23

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

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

Por ej. Hice un formulario en mi formulario div.

Código HTML:

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

Ahora el código CSS será como:

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

Problema resuelto.

¡Estar atento! El atributo de ancho está recortado por el atributo de ancho máximo. Entonces usé ...

    <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>

Tratar:

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

De esta manera, permanece independiente del tamaño de texto que se haya establecido para el cuadro de texto. Estás aumentando la altura usando relleno en su lugar

Prueba este código:

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

De esta manera, permanece independiente del tamaño de texto que se haya establecido para el cuadro de texto. En su lugar, está aumentando la altura utilizando relleno.

Los elementos se pueden dimensionar con los atributos heighty width.

Puede hacer que el ancho de entrada dependa del ancho del contenedor.

.container {
   width: 360px;
}

.container input {
   width: 100%;
}