Código HTML Select com fundo preto - suspensa triângulo é invisível no Firefox 3
-
09-06-2019 - |
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
Eu não consigo descobrir como corrigir isso - alguém pode ajudar?Há um -moz-select-triangle-color
ou algo obscuro como o que?
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.