Código HTML Select com fundo preto - suspensa triângulo é invisível no Firefox 3

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

Pergunta

Eu tenho o seguinte HTML (nota CSS, tornando o plano de fundo preto e texto branco)

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

Safari é inteligente o suficiente para fazer o pequeno triângulo que aparece à direita do texto da mesma cor do texto de primeiro plano.

Outros navegadores basicamente ignorar o CSS, por isso estamos muito bem também.

O Firefox 3 no entanto, aplica-se a cor de plano de fundo, mas deixa o triângulo preto, então você não pode ver isso, como este

Example

Eu não consigo descobrir como corrigir isso - alguém pode ajudar?Há um -moz-select-triangle-color ou algo obscuro como o que?

Foi útil?

Solução

Deve ser um Vista problema.Eu XP SP 2 e ele parece normal.

Outras dicas

Problema com a correção acima é que ele não funciona no Safari, você acaba com o fundo branco aparecendo que parece ruim.Eu tenho rodada esta usando este Moz específicos pseudo-classe:

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

Em teoria, isso só se aplica a esse CSS, se uma fantasia de tema do Windows está em vigor, veja este https://developer.mozilla.org/en/CSS/%3a-moz-system-metric(windows-padrão-tema)

O botão precisa ser preto?você pode aplicar o plano de fundo preto para as opções, em vez disso.

Para fazer a pequena seta preta mostrar em vista (com fundo preto), eu fiz uma caixa branca gif e utilizado o seguinte CSS:

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

Deixei que o código em um arquivo e empurrou-a para ff3 e eu não vejo o que você vê...a seta é o padrão de cores com fundo cinza e uma seta preta.

Você estilo de barras de rolagem também?

Eu atualizei o post, o HTML não é de agora, literalmente, todos o html que está sendo carregado, nenhum outro CSS/JS ou nada, e ele ainda se parece exatamente como publicado no pic.

Nota que eu estou no vista.Ele pode fazer coisas diferentes no XP, eu não tenho verificado

Deve ser Vista em um problema.Eu tenho XP SP 2 e ele parece normal.

Assim é.
Eu tentei no XP e ele é ótimo, e no vista com o tema definido para o windows clássico é também multa.Deve ser apenas um bug no firefox vista aero tema.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top