Problemas con los height de los select

[tapuntdesign]

Es una cuestión que a muchos puede interesarle.

Digamos que se le atribuye a un select height: 25px y se define padding:0 y borde de 1 píxel... Al examinar la altura real con firebug o inspector se ve claramente que la altura es 2 píxeles menor:




Examinando el problema, resulta que los dos píxeles derivan del borde superior e inferior, cosa que no sucede con ningún input. Esto se debe a que un incremento en el gorsor del borde produce un decremento en el tamaño del elemento porque el borde ocupa parte del elemento. En un input type=text no sucede, ya que el borde simplemente recubre el elemento sin afectar al tamaño.

Conclusión breve:

Tan sencillo, como modificar la propiedad css box-sizing a nivel de body y establecer el valor a content-box. Resulta que en los select esta propiedad está definida a border-box, por lo que el borde se descuenta al tamaño original.

Código CSS:

body select {
 
box-sizing: content-box;
-moz-box-sizing: content-box;
appearance:menulist;
-moz-appearance:menulist; 
-webkit-appearance: menulist;
}