Relleno adicional en <input type = "text">

Parece que cada navegador agrega algo de relleno mágico codificado dentro de <input type="text">. Algunos navegadores (IE, Safari, Chrome) hacen que el cuadro de entrada sea un poco más alto, pero se alinean correctamente como si fuera un elemento HTML normal. Puedo vivir con la altura extra. Pero algunos navegadores se portan mal (Firefox y Opera) y también intentan alinear verticalmente el texto o agregar algo de relleno adicional encima. Me sorprende que los navegadores modernos no permitan el diseño de cuadros de texto como si fueran de la misma manera que HTML y añaden algún formato mágico. ¿Estoy haciendo algo mal? ¿Me estoy perdiendo algún truco? ¿Son algunas propiedades CSS exclusivas que podrían ayudarme? Miré brevemente la documentación de Firefox CSS, pero no pude encontrar ninguna. Alternativamente, podría usar HTML editable en lugar de <input type="text">.Relleno adicional en <input type = "text">

Aquí hay un fragmento que demuestra el problema:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 

    <title>Test</title> 

    <style type="text/css"> 

     body, input { 
      font-family: sans-serif; 
      font-size: 16pt; 
      color: White; } 

     #textbox { 
      position: absolute; 
      left: 20px; 
      top: 20px; 
      width: 100px; 
      background-color: #A5C9E2; 
      line-height: 16pt; 
      padding: 0px; 
      margin: 0px; 
      border-width: 0px; } 

     #box { 
      position: absolute; 
      left: 120px; 
      top: 20px; 
      width: 100px; 
      background-color: #AFD66A; 
      line-height: 16pt; } 

    </style> 

</head> 
<body> 

    <input type="text" id="textbox" value="Hello"> 

    <div id="box">Hello</div> 

</body> 
</html>

Editar: he experimentado un poco con -moz-outline y -moz-box-sizing en Firefox (si acaso), pero ninguno de sus valores elimina el relleno adicional.

Fuente

2009-12-04 Jan Zich

Comience por cerrar su entrada: .... = "Hola" /> – joshcomley

De hecho es válido ya que no está usando XHTML. –

Creo que es válido en HTML 4.01 Transitional, pero seguramente, no es el problema. –

Experimenté cambiando los valores de altura de línea y tamaño de fuente a 20px y luego inspeccioné el elemento con Firebug. Las propiedades customerHeight y offsetHeight son ambas 24px (pero como esas propiedades incluyen cualquier conjunto de relleno en el elemento, no estoy seguro de si este es el navegador que expande la altura del elemento o agrega relleno).

Estableciendo explícitamente que la altura de la entrada sea la misma que la altura de línea parece hacer lo que desea, es decir, line-height: 16pt; height: 16pt; - pero sospecho que funciona al recortar el elemento, como la posición vertical del texto dentro de la entrada no cambia

Fuente

2009-12-04 13:23:03

Puede eliminar este relleno adicional cambiando el tamaño de la caja de la entrada.

-moz-box-sizing: content-box; 
-webkit-box-sizing: content-box; 
box-sizing: content-box;

Hace que los navegadores modernos se comporten igual. Es posible que deba dirigirse específicamente a IE.

Fuente

2010-08-02 21:00:40 jessebeach

Estoy intentando aplicar esto a 'input [type = "search"] 'y todavía hay un píxel de" relleno "en Firefox del que parece que no me puedo deshacer ... –

Relleno adicional en <input type = "text">

Respuesta

Cuestiones relacionadas