tablas - insertar texto en html

¿Cómo hacer un cuadro de texto y un área de texto del mismo ancho que los navegadores cruzados?

Question

Establecer el ancho del cuadro de texto (es decir, input type = "text") y el textarea a 500px no funciona en IE6 y Chrome, solo funciona bien en FF2 (no se han probado otros navegadores), IE y Chrome agregan dos píxeles al cuadro de texto.

El relleno y el margen se establece en 0 en todos los elementos utilizando

*
{
margin: 0px;
padding: 0px;
}

Cambiar el tipo de documento de xhtml 1.0 transicional a estricto tampoco funcionó.

Answer 1

Necesita establecer explícitamente un borde de 1px y hacer el ancho 498px, o hacer el borde 0 y el ancho 500px, aunque este último hará que la entrada sea imposible de ver a menos que sepa que está allí, por lo que a partir de ahí es solo un problema de estilo.

Answer 2

Puede tener algo de suerte utilizando un conjunto de estilos de restablecimiento en su CSS. Contribuyen en gran medida a eliminar las diferencias entre navegadores entre la forma en que se representan los elementos.

Eric Meyer (una de las mejores mentes de la web sobre CSS) describe los estilos de restablecimiento y por qué los usa aquí , con su última versión aquí .

Dicho esto, sin conocer el efecto general que está tratando de lograr, los elementos de formulario son notablemente difíciles de diseñar de una manera que es perfectamente uniforme en todas las plataformas de navegador. La mejor de las suertes. :)

Answer 3

También creo que el problema está en la frontera. Intente definir el estilo de borde específicamente para las entradas / textarea junto con su ancho.

input, textarea {border: 1px gris sólido; ancho: 498px; }

También eche un vistazo a la fuente si input / textarea no está definido en ningún otro lugar o en su propia etiqueta (por ejemplo, tamaño o filas / columnas). Otra opción cuando IE se equivoca es usar un archivo css especial para ello. Sin embargo, en mi humilde opinión, no debería ser necesario en su caso.

Answer 4

Tratar

input{
border:none;
}

Answer 5

En primer lugar, recomendaría evitar esa regla de reinicio "estrella", ya que solo trae problemas al final de la línea. En cambio, prefiere un restablecimiento específico como

ul, ol, p, blockquote, h1, h2 / etc ... / {margen: 0; relleno: 0; }

LOS ELEMENTOS DE LA FORMA, de hecho, es donde la regla de la estrella hace el mayor daño.

AFAIK, estableciendo el relleno y el ancho explícitamente en un área de texto y un elemento de entrada, dará a los exacts el mismo ancho de píxel en todos los navegadores.

IE6 agrega un margen de 1px al TOP y al FONDO, creo, no a los lados.

Aquí hay un ejemplo de una regla RESET que no rompe las propiedades predeterminadas de los elementos del formulario:

/*---------------------------*/
/* Base rules & reset */
/*---------------------------*/
body {
font-size:11px; line-height:1.2em; font-family:Verdana, Arial, sans-serif;
margin:0; padding:0;
background:#fff url(/01/images/cassis/body-bg.gif) repeat-x 50% 0;
color:#303030;
}
p, pre, blockquote, address, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, form, label, fieldset { margin:0; padding:0; }
ul, ol, li { list-style:none; }
input, select, textarea { font:11px Arial, sans-serif; color:#333; line-height:1.2em; }
table, caption, td, th { margin:0; padding:0; font-size:11px; line-height:1.2em; font-weight:normal; }
img { display:inline; }
/* cross-browser clearing of floats (no extra space in IE) */
div.clear { clear:both; overflow:hidden; height:0; }

Estos son simplemente aleatorios, pero entiendes la idea. No borre el margen y el relleno en todo, es mucho más seguro eliminar lo que necesita y dejar los valores predeterminados del navegador en otro lugar.

Answer 6

He estado experimentando y descubrí que "la relación" entre la entrada de texto y el área de texto se puede calcular usando 21 * 8 * x.

Si usted tiene

<input type = "text" size = "X" /> <br /> <textarea cols = "X"> </ textarea>

... y desea que sean igualmente anchos, use esta fórmula para calcular el ancho del texto de entrada.

si x = 70, entonces 21 * 8 * 70 = 581px

Entonces escribirás:

<input type = "text" size = "70" style = "width: 581px" /> <br /> <textarea cols = "70"> </ textarea>

¡Los dos serán iguales!

¡De esta forma en un programa / sitio web / etc. puede ingresar el mismo valor y obtener el mismo resultado (cols en textarea)!

Answer 7

<!--***********************CSS**************************-->
<style>
.set_font
{
font-family:verdana;
font-size:10px;
color:#ffffff;
width:250px;
}
.set_font2
{
font-family:verdana;
font-size:10px;
color:#000000;
width:250px;
}
</style>
<!--*******************HTML**************************-->
<input type="text" size="33" class="set_font2" name="inputName" id="inputName" value="inputValue" maxlength="50">
<textarea cols="30" rows="8" class="set_font2" name="inputName" id="inputName">inputValue</textarea>

Answer 8

Uso 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;
}

Funciona en IE8 +, mira caniuse .