Configuración de la altura de un < seleccione > en Firefox 2

StackOverflow https://stackoverflow.com/questions/1614206

Pregunta

Tengo un problema extraño con la altura del cuadro de selección HTML en Firefox 2, aquí está el código: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>FIREFOX 2 SELECT BOX HEIGHT ISSUE</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
      body    { margin: 0; padding:0 ;}
   div     { height: 20px; background:red; float: left; overflow: hidden; }
   select  { height: 20px; width: 100px; }
    </style>
  </head>

  <body>
    <div>Should be same height as </div>
    <select><option>this</option></select>
  </body>
</html>

La altura es 2 píxeles más grande: el relleno, el tamaño de la fuente y la altura de la línea no parecen tener ningún efecto y se me acabaron las ideas y lugares para buscar. ¿Debo suponer que la altura real del cuadro de selección en FF2 es siempre la altura css + 2? ¿Puedo arreglarlo o solucionarlo?

¿Fue útil?

Solución

Bienvenido al maravilloso mundo del estilo de control de formas.

Sin querer sonar derrotista, creo que deberías rendirte. No importa cómo estire los controles de formulario, siempre habrá navegadores que ignorarán totalmente sus estilos. Creo que Safari ignora la mayoría de los CSS. Consulte ' elementos de estilo seleccionados ' en 456 Berea Street para ver ejemplos.

Hay alternativas utilizando Javascript. Creo que jQuery UI tiene algunos widgets similares al elemento de selección. También puede usar este jQuery click menu y adjunte una función que establezca el valor de un campo de entrada oculto. He hecho esto antes y funciona muy bien. Este tipo de cosas es la única forma en que obtendrá un control total sobre el tamaño y la apariencia.

Otros consejos

Puede haber algunos valores predeterminados del navegador en juego. ¿Qué sucede? Id. usas un restablecer CSS y luego aplicar tus estilos? ¿Todavía está apagado 2px?

Renuncia al uso de CSS para darle estilo. Abrazar jquery / javascript.

Querrá crear sus propias imágenes y usar el evento de clic de esas imágenes para alternar las entradas del formulario real. Esas entradas de formulario deben estar en una pantalla de estilo contenedor: ninguna. De esta manera, puedes diseñarlo como quieras.

Aquí hay un buen artículo sobre el tema: http: //www.noupe. com / css / form-elements-40-cssjs-styling-and-function-techniques.html

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top