¿Cómo hacer un cuadro de texto y un área de texto con cruzadores de mismo ancho?

Question

Establecer el ancho del cuadro de texto (es decir, tipo de entrada = "texto") y el área de texto a 500px no funciona en IE6 y Chrome, solo funciona bien en FF2 (no se han probado otros navegadores), IE y Chrome agregue dos píxeles al cuadro de texto.

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 de transición a la estricta no funcionó demasiado.

Answer 1

Trate

input{ 
border:none; 
} 

Answer 2

Es posible que haya un poco de suerte usando un conjunto de estilos de reset 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 reinicio y por qué los usa here - con su última versión here.

Dicho esto, sin saber 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

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í, entonces desde allí es solo un problema de estilo.

Answer 4

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

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

también echar un vistazo en la fuente si la entrada/área de texto no está definido en otro sitio o en su propia etiqueta (por ejemplo, tamaño o filas/cols). Otra opción cuando IE se equivoca está usando un archivo css especial para ello. Sin embargo, en mi humilde opinión, no debería ser necesario en su caso.

Answer 5

Recomendaría primero evitar esa regla de restablecimiento "estrella", ya que solo trae problemas al final de la línea. En su lugar, prefiera un restablecimiento específico como

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

FORM ELEMENT, de hecho, es donde la regla de la estrella hace el mayor daño.

AFAIK, estableciendo el relleno y ancho explícitamente en un área de texto y un elemento de entrada, dará 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.

He aquí un ejemplo de una regla de RESET taht Does'nt romper las propiedades predeterminadas de los elementos de 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 sólo azar, pero se entiende 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

<!--***********************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 7

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 tiene

< input type = "text" size = "X" /> < br /> < cols de área de texto = "X"> </textarea>

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

si x = 70 y luego 21 * 8 * 70 = 581px

Así que va a escribir:

< input type = "text" size = estilo "70" = "width: 581px "/> < br /> < área de texto cols =" 70" > </textarea>

Los dos serán iguales!

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

Answer 8

Uso CSS3 para hacer que el cuadro de texto y la entrada funcionen de la misma manera. See jsFiddle.

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

Funciona en IE8 +, see caniuse.