2012-03-08 8 views
8

Duplicar posible:
padding is not working in Safari and IE in select listrelleno no funciona en determinados etiquetas en Safari

Así que tienen una etiqueta de selección básica de este modo:

<select> 
    <option>1</option> 
    <option>2</option> 
    <option>2</option> 
</select> 

Pero si Puse relleno en la etiqueta de selección, no funciona en Safari:

select { 
    padding: 6px; 
} 

En IE7, lo entiendo, ¿pero en Safari? ¿Hay alguna forma de evitar esto?

+0

ver http://stackoverflow.com/questions/2966855/padding-is-not-working-in-safari-and-ie-in-select-list – Luca

Respuesta

16

respondida anteriormente aquí: https://stackoverflow.com/a/2967371/181002

Webkit ha tomado sobre sí mismo para no permitir el relleno de select -Los artículos, pero se puede lograr el mismo efecto mediante el uso de un simple 'truco', que consiste en aplicar line-height y text-indent a su seleccione un artículo.

He aquí un ejemplo: http://jsfiddle.net/B858P/

+0

que había me gusta ver el ejemplo jsFiddle pero creo que el enlace está roto. – catandmouse

+0

Sí, parece que jsFiddle está fuera de servicio. Aquí hay un equivalente de jsBin: http://jsbin.com/eleduj/2/edit Adviértase, este hack es casi exclusivo de webkit, ya que el texto de sangría parece enviar el pequeño icono de selección fuera de la caja en Firefox, y la altura de línea simplemente no hace nada en absoluto, lo que significa que probablemente te verás obligado a realizar todo tipo de hacks de CSS ordenado para que funcione en el navegador cruzado, y en ese punto, es mejor que construyas nuestra propia selectbox personalizada. : http://weblogs.asp.net/jaimedelpalacio/archive/2008/11/22/custom-html-dropdown-control-part-1.aspx –

+0

Me pregunto cuál es la razón detrás de no permitir el relleno para los navegadores webkit? De todos modos, en Chrome, el relleno muestra, el problema solo ocurre en Safari. De todos modos, intentaré tu solución. – catandmouse

Cuestiones relacionadas