Em Macs e dispositivos iOS, no Safari, um <select>
elemento com uma cor de fundo gera um brilho sobre si mesmo. Isso não parece acontecer em outros sistemas operacionais.
Por exemplo, tenho um elemento select com estas propriedades de estilo:
select {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 3px 6px;
margin: 10px 0 7px;
width: 250px;
background-color: #BD2786;
color: white;
letter-spacing: -.04em;
font-weight: bold;
border: 0;
}
E meu elemento tem a cor de fundo que eu quero, mas o brilho ainda está lá. Alguém sabe fazer uma cor lisa?
css
macos
safari
drop-down-menu
background-color
Ian Hunter
fonte
fonte
-moz-appearance: none; -webkit-appearance: none; appearance: none;
Usar
-webkit-appearance:none;
também removerá as setas indicando que este é um menu suspenso.Veja este snippet que o faz funcionar em diferentes navegadores e adiciona setas personalizadas sem incluir nenhum arquivo de imagem:
fonte
no-repeat 95% 50%
porno-repeat right 2px center
Versão 2019
URL de imagem inline mais curto, mostra apenas a seta para baixo, cor de seta personalizável ...
De https://codepen.io/jonmircha/pen/PEvqPa
O autor é provavelmente Jonathan MirCha
fonte
background-color
propriedade se aplica ao plano de fundo do elemento selecionado. Para alterar a cor da seta para baixo, você precisa alterar a propriedade de preenchimento SVG no URL, por exemplofill='%23fc0000'
Desculpe por acumular um item antigo. Eu encontrei respostas parciais para minhas perguntas aqui, mas tive que fazer algum trabalho, então eu queria compartilhar meus resultados para a próxima pessoa.
Acabei usando a mesma abordagem dos outros colaboradores, mas com alguns ajustes para corrigir o seguinte
A seguir, você encontrará uma solução de trabalho com os problemas acima corrigidos. Observação: usei uma seta branca para o meu caso de uso, pode ser necessário alterar a cor da seta para o seu.
aqui está uma prévia:
fonte
Verifique -webkit-aparência: nenhum e seus derivados. Descrito originalmente por Chris Coyer aqui: https://css-tricks.com/almanac/properties/a/appearance/
fonte
Como mencionado várias vezes aqui
também remove as setas, o que não é o que você deseja na maioria dos casos.
Uma solução fácil que descobri é simplesmente usar select2 em vez de select. Você também pode mudar o estilo de um elemento select2 e, o mais importante, select2 tem a mesma aparência no Windows, Android, iOS e Mac.
fonte
Se você inspecionar a folha de estilo do agente do usuário de Chome, você encontrará este
em suma, sua propriedade de contorno - torne-o Nenhum
isso deve remover o brilho
fonte