Respuestas:
widthy heightse usan al ir a la ruta css.
<!DOCTYPE html>
<html>
<head>
<title>Setting Width and Height on Textareas</title>
<style>
.comments { width: 300px; height: 75px }
</style>
</head>
<body>
<textarea class="comments"></textarea>
</body>
</html>empara especificar la altura, dudo que se pueda usar para especificar el ancho. Se puede trabajar con fuentes de espacio sencillo (después de averiguar el ancho: cociente de la altura de los caracteres y modificar el valor de anchura correspondientemente), y eso es todo. Excepto espacio sencillo, grosor de los caracteres no son fijos, por lo que no creo emo colsatributo puede ayudar a la hora de especificar el ancho.
<textarea rows="4" cols="50"></textarea>Es equivalente a:
textarea {
height: 4em;
width: 50em;
}donde 1em es equivalente al tamaño de fuente actual, por lo tanto, el área de texto tiene 50 caracteres de ancho. ver aquí .
paddingy line-heighten cuenta. Supongamos que tiene un relleno de medio em en la parte superior e inferior y una altura de línea de 1.2em, entonces la altura para 4 filas sería 1 + 4 * 1.2 = 5.8em.
height: calc(3em + 8px);.
rowsatributo es (algo) confiable, no confiaría en el colsatributo a menos que esté usando fuentes monoespaciales en el área de texto. Vea el violín actualizado de @ AlexanderScholz .
No creo que puedas. Siempre voy con altura y ancho.
textarea{
width:400px;
height:100px;
}Lo bueno de hacerlo al estilo CSS es que puedes darle un estilo completo. Ahora puede agregar cosas como:
textarea{
width:400px;
height:100px;
border:1px solid #000000;
background-color:#CCCCCC;
}Que yo sepa, no puedes.
Además, para eso no es CSS. CSS es para el estilo y HTML es para el marcado.
line-height, incluido paddingen el contenedor (sin calcular una altura basada en box-sizing), incluso teniendo en cuenta las diferentes relaciones de aspecto de las fuentes utilizadas para garantizar que el cuadro de texto muestre el número establecido de filas de texto que no puede lograr utilizando css height.
Solo quería publicar una demostración usando calc () para configurar filas / altura, ya que nadie lo hizo.
body {
/* page default */
font-size: 15px;
line-height: 1.5;
}
textarea {
/* demo related */
width: 300px;
margin-bottom: 1em;
display: block;
/* rows related */
font-size: inherit;
line-height: inherit;
padding: 3px;
}
textarea.border-box {
box-sizing: border-box;
}
textarea.rows-5 {
/* height: calc(font-size * line-height * rows); */
height: calc(1em * 1.5 * 5);
}
textarea.border-box.rows-5 {
/* height: calc(font-size * line-height * rows + padding-top + padding-bottom + border-top-width + border-bottom-width); */
height: calc(1em * 1.5 * 5 + 3px + 3px + 1px + 1px);
}<p>height is 2 rows by default</p>
<textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
<p>height is 5 now</p>
<textarea class="rows-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
<p>border-box height is 5 now</p>
<textarea class="border-box rows-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>Si usa valores grandes para los rellenos (por ejemplo, más de 0.5em), comenzará a ver el texto que desborda el área de contenido (-box), y eso podría llevarlo a pensar que la altura no es exactamente x filas ( que configuras), pero lo es. Para entender lo que está pasando, es posible que desee comprobar hacia fuera El modelo de caja y la caja de dimensionamiento de las páginas.