formularios - ¿Hay una manera simple de hacer que html textarea y el texto del tipo de entrada sean igualmente anchos?
que es un formulario en html (11)
¿Hay una manera simple de obtener un área de texto HTML y un tipo de entrada = "texto" para representar con (aproximadamente) el mismo ancho (en píxeles), que funciona en diferentes navegadores?
Una solución CSS / HTML sería genial. Preferiría no tener que usar Javascript.
Gracias / Erik
Para responder la primera pregunta (aunque ha sido respondida hasta la muerte): un ancho de CSS es lo que necesita.
Pero quería responder la pregunta de Gaius en las respuestas. Gaius, tu problema es que estás configurando el ancho en em''s. Es una buena idea que hacer, pero debe recordar que los em se basan en el tamaño de fuente. Por defecto, un área de entrada y un área de texto tienen caras y tamaños de fuente diferentes. Entonces, cuando se establece el ancho en 35em, el área de entrada usa el ancho de la fuente y el área de texto usa el ancho de la fuente. La fuente predeterminada del área de texto es más pequeña, por lo tanto, el cuadro de texto es más pequeño. Establezca el ancho en píxeles o puntos, o asegúrese de que los cuadros de entrada y las áreas de texto tengan la misma fuente y tamaño de fuente:
.mywidth {
width: 35em;
font-family: Verdana;
font-size: 1em;
}
<input type="text" class="mywidth"/><br/>
<textarea class="mywidth"></textarea>
Espero que ayude.
Alguien más lo mencionó y luego lo eliminó. Si desea aplicar estilo a todas las entradas de texto y de texto de la misma manera sin clases, use el siguiente CSS (no funciona en IE6):
input[type=text], textarea { width: 80%; }
Esta es una pregunta de CSS: el ancho incluye los anchos de borde y relleno, que tienen diferentes valores predeterminados para INPUT y TEXTAREA en diferentes navegadores, así que conviértelos también en los mismos:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>width</title>
<style type="text/css">
textarea, input { padding:2px; border:2px inset #ccc; width:20em; }
</style>
</head>
<body>
<p><input/><br/><textarea></textarea></p>
</body>
</html>
Esto se describe en la sección Dimensiones del cuadro de la especificación CSS, que dice:
El ancho del cuadro viene dado por la suma de los márgenes izquierdo y derecho, el borde y el relleno, y el ancho del contenido.
Sí hay. Intenta hacer algo como esto:
<textarea style="width:80%"> </textarea>
<input type="text" style="width:80%" />
Ambos deben equipararse al mismo tamaño. Puede hacerlo con tamaños absolutos (px), tamaños relativos (em) o tamaños porcentuales.
Solo una nota: el ancho siempre está influenciado por algo que sucede en el lado del cliente: PHP no puede afectar ese tipo de cosas.
Establecer una clase común en los elementos y establecer un ancho en CSS es la apuesta más clara.
Use una clase CSS para ancho, luego coloque sus elementos en HTML DIVs, DIVs que tienen la clase mencionada.
De esta forma, el control del diseño en general debería ser mejor.
también puedes usar el siguiente CSS:
.mywidth{
width:100px;
}
textarea{
width:100px;
}
HTML:
<input class="mywidth" >
<textarea></textarea>
input[type="text"] { width: 60%; }
input[type="email"] { width: 60%; }
textarea { width: 60%; }
textarea { height: 40%; }
Use CSS3 para hacer que el cuadro de texto y la entrada funcionen de la misma manera. Ver jsFiddle .
.textarea, .textbox {
width: 200px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Deberías poder usar
.mywidth {
width: 100px;
}
<input class="mywidth">
<textarea class="mywidth"></textarea>
Como se menciona en el cuadro de texto Unequal Html y en el ancho desplegable con XHTML 1.0 strict , también depende de su doctype. Me he dado cuenta de que al usar XHTML 1.0 strict, la diferencia de ancho sí aparece.