2012-04-16 7 views
6

Sé que las cajas de selección son un poco difíciles de ajustar con css, pero sin recurrir a técnicas avanzadas, de todos modos puedo agregar algo de relleno para empujar hacia abajo el texto sin que también agregue relleno al flecha en el lado derecho?Relleno en cuadros de selección

+0

Podría tal vez tratar de alterar el relleno en los elementos 'opcionales' anidados? Solo un pensamiento ... –

+0

No, no hay. Diseñar en cuadros de selección es como mencionaste un dolor. Hay muchos complementos jQuery para cuadros de selección disponibles por esta misma razón. El estilo de navegador desplegable disponible de un listbox es muy limitado. –

+0

¿No es esto lo que estás esperando? http://jsfiddle.net/LpvDg/ – Wasbazi

Respuesta

0

prueba interesante aquí http://cssdeck.com/labs/styling-select-box-with-css3

El autor cubrió la flecha en el lado derecho y creó su cuenta, utilizando el prefijo proveedor css para dirigirse a diferentes navegadores. después de hacer eso, tu relleno es gratis.

+0

vale ... me los merecía. no es mi código aunque es interesante, y * es * una solución de CSS pura que funcionará en el 90% de los casos. – commonpike

12

agrega esto a tu clase de CSS. Quizás esto ayude?

-webkit-appearance:none; 
-moz-appearance:none; 
appearance:none; 
+1

oculta las flechas ... – romainm

4

Desde select cajas aparecen de manera diferente en diferentes navegadores y sistemas operativos sobre todo, no se puede garantizar una consistencia.

Por ejemplo, la cantidad mínima de formato que pueda hacer en un Mac es la siguiente:

select { height:40px; background:transparent; } 

y se ve así:

Select Box

+0

, ¿tienes alguna sugerencia? –

+0

Recomendaría un cuadro de selección personalizado, por ejemplo: https://jqueryui.com/selectmenu/ – redolent

Cuestiones relacionadas