[SOLUCIONADO] Width y padding en select.

[Rafael]

¿Se acuerdan cómo reaccionaba el width con el padding en Ie hace aaaaaños?

En el modelo de caja, uno asignaba un width, digamos de 500px y al agregar un padding de 50px, la caja seguía midiendo 500px, ya que el padding era agregado hacia adentro.

Para mí esa era la manera correcta. Ahora hay que sumar y restar los paddings al width, para saber que rayos width es en realidad.
Recuerdo que se comentó en la w3 que se implementaría algo así como inner-width... en fin.

Bueno... Resulta que el ¡SELECT es un objeto que sigue funcionando así!

¿Hay algo para que se comporte como todas las demás cajas?
Está el -webkit-appearance, pero hago más mermelada con esto, que lo que resuelvo...

Y el detalle es que en el navegador del android aparte se aplasta la altura del select.

[pzin]

El modelo de caja del IE antiguo para mi también fue siempre el correcto. Luego todos lo demonizaban. Incluso se le llamó box-model bug.

Y hoy en día, lo normal es forzar ese modelo de caja malo malísimo usando box-sizing. Supongo que es lo que comentas con inner-width:

Código CSS:

* {
  box-sizing: border-box;
}
 

No sabía lo de select. Pero para forzar que funcione como los demás elementos por defecto, puedes hacerlo igual cambiando el valor:

Código CSS:

select {
  box-sizing: content-box;
}
 

Otro valor posible es padding-box, que lo que hace es sólo incluir el padding al ancho del elemento. No sé si alguien lo usa.

[Rafael]

Voy a probar. Thanks a lot.

Edito... demonios... estoy tentado a cambiar toooooodas mis plantillas a ese modelo

Edito2: Wooooooooooooooooo


Edito3: ya algo de tiempo después... WOOOOOOOOOOOOOOOOO!

Edito varios días después... WOOOOOOOOOOO!


Edito algunas semanas después... WOOOOOOOOOOOOOOOOOOOOOO!