99 votos

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

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

115voto

Rowno Puntos 1062

Sólo tienes que usar:

textarea {
    width: 200px;
}

o

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

Dependiendo de lo que se entienda por "caja de texto".

36voto

Dan Herbert Puntos 38336

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" del Modelo de caja del W3C . Lo que quiero decir con víctima es que la altura y la anchura de un cuadro de texto es la suma de las propiedades de altura/anchura asignadas anteriormente, además de la altura/anchura del relleno, y la anchura del borde. Por esta razón, sus cuadros de texto tendrán tamaños ligeramente diferentes en los distintos navegadores, dependiendo del relleno por defecto en los distintos navegadores. Aunque los diferentes navegadores tienden a definir diferentes rellenos para los cuadros de texto, la mayoría de los restablecer las hojas de estilo no suelen incluir <input /> en sus hojas de reinicio, así que esto es algo a tener en cuenta.

Puede estandarizarlo definiendo su propio relleno. Aquí está su CSS con el relleno especificado, para que el cuadro de texto se vea igual en todos los navegadores:

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

He añadido 1 píxel de relleno porque algunos navegadores tienden a hacer que el cuadro de texto se vea demasiado abarrotado si el relleno es de 0px. Dependiendo de tu diseño, puede que quieras añadir incluso más relleno, pero es muy recomendable que definas el relleno tú mismo, de lo contrario estarás dejando que los diferentes navegadores decidan por sí mismos. Para una mayor consistencia entre los navegadores, también debería definir el borde usted mismo.

11voto

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

6voto

Lightsaber Puntos 73

Su código de caja de texto:

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

Su código CSS:

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

o

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

Así, primero seleccionas tu elemento con atributos (mira el primer ejemplo) o clases (mira el último ejemplo). Después, asignas los valores de altura y anchura a tu elemento.

1voto

Matchu Puntos 37755

Los elementos pueden ser dimensionados con la función height y width atributos.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X