¿Existe una forma sencilla de hacer que el área de texto html y el texto de tipo de entrada sean igualmente anchos?

StackOverflow https://stackoverflow.com/questions/28713

  •  09-06-2019
  •  | 
  •  

Pregunta

¿Existe una forma sencilla de hacer que un área de texto HTML y un tipo de entrada = "texto" se representen con (aproximadamente) el mismo ancho (en píxeles), que funcione en diferentes navegadores?

Una solución CSS/HTML sería brillante.Preferiría no tener que utilizar Javascript.

Gracias /Erik

¿Fue útil?

Solución

Deberías poder utilizar

.mywidth {
  width: 100px;   
}
<input class="mywidth">
<textarea class="mywidth"></textarea>

Otros consejos

Para responder a la primera pregunta (aunque ha sido respondida hasta la muerte):Un ancho CSS es lo que necesitas.

pero queria responder La pregunta de Cayo en las respuestas.Gaius, tu problema es que estás configurando el ancho en em.Es una buena idea hacerlo, pero debes recordar que los em se basan en el tamaño de fuente.De forma predeterminada, un área de entrada y un área de texto tienen diferentes tipos de fuente y tamaños.Entonces, cuando configura el ancho en 35 em, el área de entrada usa el ancho de su fuente y el área de texto usa el ancho de su 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:

.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 mencionó esto y luego lo eliminó.Si desea aplicar estilo a todas las áreas de texto y entradas 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 hazlos iguales también:

<!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 el Dimensiones de la caja sección de la especificación CSS, que dice:

El ancho del cuadro viene dado por la suma de los márgenes, borde y relleno izquierdo y derecho, y el ancho del contenido.

Utilice CSS3 para hacer que el cuadro de texto y la entrada funcionen igual.Ver jsFiddle.

.textarea, .textbox {
    width: 200px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

Sí hay.Intenta hacer algo como esto:

<textarea style="width:80%"> </textarea>
<input type="text" style="width:80%" />

Ambos deben tener el mismo tamaño.Puedes hacerlo con tamaños absolutos (px), tamaños relativos (em) o tamaños porcentuales.

Sólo 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 su apuesta más limpia.

Utilice una clase CSS para el ancho, luego coloque sus elementos en DIV HTML, los DIV que tengan la clase mencionada.

De esta manera, el control del diseño en general debería ser mejor.

Como se menciona en Cuadro de texto HTML desigual y ancho desplegable con XHTML 1.0 estricto También depende de su tipo de documento.Me he dado cuenta de que cuando uso XHTML 1.0 estricto, la diferencia de ancho sí aparece.

input[type="text"] { width: 60%; } 
input[type="email"] { width: 60%; }
textarea { width: 60%; }
textarea { height: 40%; }

Hoy en día, si usa bootstrap, simplemente proporcione a sus campos de entrada la form-control clase.Algo como:

<label for="display-name">Display name</label>
<input type="text" class="form-control" name="displayname" placeholder="">

<label for="about-me">About me</label>
<textarea class="form-control" rows="5" id="about-me" name="aboutMe"></textarea>

También puede usar el siguiente CSS: 

.mywidth{
width:100px;
}
textarea{
width:100px;
}

HTML:

<input class="mywidth" >
<textarea></textarea>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top