etiquetas - No se puede establecer el ancho de textarea con CSS

css meaning

Question

Intenté usar este CSS para establecer el ancho de mis elementos de formulario:

input[type="text"], textarea { width:250px; }

Si miras esta captura de pantalla de Firefox, verás que los campos no tienen el mismo ancho. Obtengo un efecto similar en Safari.

texto alternativo http://screamingv.com/ss.png

¿Hay alguna solución?

ACTUALIZACIÓN: Gracias por la información hasta el momento. Ahora me he asegurado de que el relleno / margen / borde en ambos elementos esté configurado de la misma manera. Todavía estaba teniendo el problema. El CSS original que publiqué fue simplificado ... También estaba configurando la altura del área de texto a 200px. Cuando elimino el estilo de altura, los anchos coinciden. Extraño. Eso no tiene sentido.

¿Error del navegador?

Answer 1

Esto es probablemente causado por diferentes márgenes predeterminados en los elementos <input> y <textarea> . Intenta usar algo como esto.

input[type="text"], textarea {
padding: 0;
margin: 0;
width:250px;
}

Answer 2

Pruebe border: 0; o borde: 1px sólido # 000;

Answer 3

Tal vez tengas una superposición de CSS específica del usuario definida en algún lugar de tu navegador, porque acabo de probarla y funciona como se esperaba: http://jsbin.com/exase/edit (Probado en Windows. ¿Quizás los widgets nativos de Apple tengan alguna peculiaridad?)

Answer 4

También estaba luchando con este tipo de problema, y ​​esta pregunta fue el primer resultado de mi búsqueda en Google. Lo que finalmente funcionó para mí fue establecer box-sizing: content-box para el box-sizing: content-box de texto: Drupal 7 establece esto de forma predeterminada en border-box que hace que el ancho del relleno y del borde se resta del tamaño del área de texto.

Answer 5

Esta respuesta tiene tres años de retraso, pero la publico aquí por si alguien más intenta establecer el ancho en em''s y no en pixels y aparece en esta publicación (como acabo de hacer). Asegúrate de que el tamaño de la fuente sea el mismo,

p.ej

input, textarea {
font-size:12px;
width:20em;
padding:0;
margin:0
}

de lo contrario, el área de texto puede tener un tamaño diferente (verdadero en FF12).

Answer 6

Intente eliminar el relleno y los bordes. O intente hacerlos iguales para ambos elementos

input[type="text"],
textarea {
width:250px;
padding: 3px;
border: none;
}

O:

input[type="text"],
textarea {
width:250px;
padding: 0;
border: 1px solid #ccc;
}

Los elementos INPUT y TEXTAREA a menudo tienen algo de relleno aplicado por el navegador (varía según el navegador) y esto puede hacer que las cosas parezcan efectivamente más anchas que el ancho asignado.

ACTUALIZACIÓN: también box-sizing: border-box; : box-sizing: border-box; es una forma práctica de establecer los anchos que ese relleno y el borde comerán en lugar de agregarlos. Ver: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Answer 7

Establezca el ancho 100% y luego use el ancho máximo:

 textarea {
width:100%;
max-width:250px;
}

// eliminado margen y relleno, puede agregarlo si lo desea.