Etiqueta de selección HTML con fondo negro: el triángulo desplegable es invisible en Firefox 3

StackOverflow https://stackoverflow.com/questions/29244

Pregunta

Tengo el siguiente HTML (tenga en cuenta que CSS hace que el fondo sea negro y el texto sea blanco)

<html>
  <select id="opts" style="background-color: black; color: white;">
    <option>first</option>
    <option>second</option>
  </select> 
</html>

Safari es lo suficientemente inteligente como para hacer que el pequeño triángulo que aparece a la derecha del texto tenga el mismo color que el texto de primer plano.

Otros navegadores básicamente ignoran el CSS, por lo que también están bien.

Sin embargo, Firefox 3 aplica el color de fondo pero deja el triángulo negro, por lo que no puedes verlo, así

Example

No puedo encontrar cómo solucionar este problema. ¿Alguien puede ayudarme?Hay una -moz-select-triangle-color ¿O algo oscuro como eso?

¿Fue útil?

Solución

Debe ser un Vista problema.Tengo XP SP 2 y parece normal.

Otros consejos

El problema con la solución anterior es que no funciona en Safari: terminas mostrando un fondo blanco que se ve mal.Solucioné esto usando esta pseudoclase específica de Moz:

select:-moz-system-metric(windows-default-theme) {
    background-image: url(../images/selectBox.gif);
    background-position: right;
    background-repeat: no-repeat;
}

En teoría, esto solo aplica este CSS si hay un elegante tema de Windows en vigor, consulte esto https://developer.mozilla.org/en/CSS/%3a-moz-system-metric(tema-predeterminado-de-windows)

¿El botón tiene que ser negro?en su lugar, podrías aplicar el fondo negro a las opciones.

Para que la pequeña flecha negra se muestre en Vista (con un fondo negro), hice un gif de cuadro blanco y usé el siguiente CSS:

select {
    background-image: url(../images/selectBox.gif);
    background-position: right;
    background-repeat: no-repeat;
}

Dejé ese código en un archivo y lo empujé a ff3 y no veo lo que ves... la flecha tiene el color predeterminado con fondo gris y flecha negra.

¿También estás diseñando barras de desplazamiento?

Actualicé la publicación, el HTML que contiene ahora es literalmente todo el html que se está cargando, ningún otro CSS/JS ni nada, y todavía se ve exactamente como se publica en la imagen.

Tenga en cuenta que estoy en Vista.Puede que haga cosas diferentes en XP, no lo he comprobado

Debe ser un problema de Vista.Tengo XP SP 2 y parece normal.

Así es.
Lo probé en XP y está bien, y en Vista con el tema configurado en Windows Classic también está bien.Debe ser simplemente un error en el tema Firefox-Vista-aero.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top