Consulte http://demo.neeraj.name/admin_data en Chrome y Firefox. En Firefox, el cuadro de selección tiene una gran altura. En Chrome, la altura del cuadro de selección es muy pequeña.¿Cómo estandarizar la altura de un cuadro de selección entre Chrome y Firefox?
¿Cómo hago para que el cuadro de selección de cromo y safari se vea como el menú desplegable de selección de Firefox?
página de ejemplo funciona Google Chrome y Safari 4 4
¿Funciona igual que en Firefox? No para mí. –
Google Chrome - http://twitpic.com/1cc62p Safari - http://twitpic.com/1cc664 –
puede establecer la clase de etiqueta 'select' en' btn' y luego cambiar su altura, usando 'css', eso es cómo lo resolví (en mac) – Emma
me he encontrado con este problema antes
Ajuste de la altura del elemento de selección funciona bien en WebKit en Windows, pero falla en WebKit en un Mac .
Si se establece el atributo css
-webkit-appearance: menulist-button;
Permitirá a la altura para que funcione correctamente en un Mac, pero crea esta frontera negro raro en las ventanas. Puede ajustar el borde configurando la propiedad border del css, pero eso cambia el aspecto en todos los navegadores que le permiten seleccionar bordes, no solo webkit.
En este punto, me rendí, pero espero que sea un buen punto de partida si desea investigar más a fondo.
Esta debería ser la respuesta correcta. – pixelfreak
me funciona a la perfección. – bobsouza
Perfecto. ¡Gracias! – rmarscher
Aumente el line-height.
Esta debería ser la respuesta aceptada –
Esto dejó de funcionar en Mac Chrome 30.0.1599.69 –
¡ERES MI HÉROE! Sufrí durante horas con esta basura ... Ahora solo tengo que configurar las cosas fuente para el elemento seleccionado – KapteinMarshall
que utiliza jQuery combobox para esto.
Con esto, puede establecer la altura de las clases de CSS necesarias a la altura que necesita su cuadro de selección.
Alerta de enlace muerto – Zero
Gracias. Lo he cambiado a un enlace similar. – markashworth
Simplemente establezca la propiedad de altura. la altura de línea funcionó en Safari en Windows, pero no en Mac. altura trabajada en ambos.
Tengo el mismo problema y Chrome en Mac simplemente no quiere cambiarlo – Thea
Puede aumentar el tamaño de letra para ayudar con la altura también. Creo que Safari mac muestra hasta 16 píxeles de tamaño de fuente. Al menos obtiene una región de clic más grande.
altura no funciona en Safari a menos que también tiene un fondo conjunto. Si configura un fondo, puede perder las flechas desplegables en la versión de Windows de Safari. De nuevo, el estilo de la forma parece estar forjado con problemas.
Establecer 'fondo: ninguno' parece suficiente para hacer que Chrome y Safari respeten la propiedad de altura para los cuadros de selección en OSX. Aunque parece un hack. La solución de combobox jQuery es probablemente mejor a largo plazo. – Anton
@antonm: No estoy seguro de cuán bien funciona el combobox jQuery en dispositivos móviles. – cdmckay
@antonm no parece que la mayoría de CSS parezca un hackeo? :) He aceptado la sensación de que estoy haciendo algo mal cuando escribo CSS – corbin
use la propiedad border del css. hacer que el borde de selección sea none o 0. borde: ninguno; mostrando perfectamente en Chrome y Safari en Mac OS
Al configurar el borde 'border; none;' o ': 1px solid #ccc;' parece activar la capacidad de modificar las propiedades de fuente de la entrada para Mac Chrome/Safari. Extraño. – Justin
Sí, escribí una publicación de blog en ella, simplemente agregué el borde y puede cambiar la altura, la fuente, etc. http://webstori.es/normalise-select-html-tags-in-windows-and-mac/ – hcharge
Esto también funciona en la versión 32.0.1700.102 de Chrome en MacOS, similar a la respuesta de Chi con la opción de lista de menú de webkit. –
Uso line-height para el safari de su trabajo.
@ La respuesta de Chi es correcta. Otro truco rápida es añadir un estilo CSS frontera:
seleccione { frontera: 1px #CCC sólida }
Este tanto desencadena la aparición webkit-: propiedad botón menulist con la ventaja añadida de la eliminación de la feo borde negro :).
Esto funcionó para mí. – somecallmejosh
Mismo efecto que '-webkit-appearance: menulist-button;' – Charles
Totalmente funciona. Chrome, Safari, Firefox. ¡FTW! – mpemburn
Por favor, considere cambiar la respuesta correcta, ya que el que tiene más votos es mucho más práctico. – willdanceforfun
Esta pregunta ya no es real. Porque te estás refiriendo a cosas que ya no existen. Hubiera sido mejor si ha copiado el HTML, CSS y otras cosas relevantes en el texto de la pregunta ... – Mzn
Asegúrese de desplazarse hacia abajo hasta la parte inferior. Lamentablemente, la mejor respuesta es la 2da. De la última. – Gavin