Como posso remover o brilho de um elemento selecionado no Safari no Mac?


111

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?

Respostas:


193

@beanland; Voce tem que escrever

-webkit-appearance:none;

em seu css.

leia isto http://trentwalton.com/2010/07/14/css-webkit-appearance/


4
não há necessidade de agradecimento porque há muitas coisas que eu não sabia :)
sandeep

123
Existe uma maneira de manter a flecha do lado direito? Eu quero substituir apenas a cor. Obrigado
Marc

18
@sandeep: E para torná-lo cruzado em navegadores:-moz-appearance: none; -webkit-appearance: none; appearance: none;
Dorian

6
@Marc Se depois de 3 anos você ainda estiver interessado .. Eu adicionei uma solução que encontrei para fazer aparecer as setas.
alicjasalamon

2
A solução para o IE é usar select :: - ms-expand {display: none; } para ocultar o ícone da caixa de seleção nativa do IE e, em seguida, use uma imagem png real como plano de fundo para o novo ícone. O problema ocorre porque as imagens SVG nem sempre são posicionadas corretamente via CSS no IE.
Phyllis Sutherland

106

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:

select{
	background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 95% 50%;
	-moz-appearance: none; 
	-webkit-appearance: none; 
	appearance: none;
    /* and then whatever styles you want*/
	height: 30px; 
	width: 100px;
	padding: 5px;
}
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>


16
doce, agradeço a correção das setas! aqui está uma versão com fundo transparente: selecionar {background: url (data: image / svg + xml; base64, PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU + LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM + PHRpdGxlPmFycm93czwvdGl0bGU + PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjEuNDEgNC42NyAyLjQ4IDMuMTggMy41NCA0LjY3IDEuNDEgNC42NyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIzLjU0IDUuMzMgMi40OCA2LjgyIDEuNDEgNS4zMyAzLjU0IDUuMzMiLz48L3N2Zz4 =) no-repeat 95% a 50%; }
Ingo Renner

1
fez uma seta transparente (não poderia colar aqui devido ao comprimento): pastebin.com/HQ0x4Rka
mga

5
Se você tiver uma seleção ampla de elementos, isso parecerá um pouco estranho. Para corrigir isso, você pode usar os deslocamentos da borda da posição do fundo do CSS3 para alinhar melhor o fundo. Portanto, substitua no-repeat 95% 50%porno-repeat right 2px center
iSWORD

3
As mesmas setas, mas em pastebin.com/07iS41b5
Andreas Gassmann

2
Percebo que as setas adicionadas incluem uma seta para cima / para baixo - alguma solução rápida apenas para mostrar a seta para baixo usual?
Brett

14

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

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%238C98F2'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
  background-size: 12px;
  background-position: calc(100% - 20px) center;
  background-repeat: no-repeat;
  background-color: #efefef;
}

1
A background-colorpropriedade 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'
Noel Abrahams

Melhor usar a posição de fundo sem calc: posição de fundo: direita .8em 60% superior; e algum cursor: é necessário
Iggy

Existe uma versão de seta dupla disso que alguém pode demonstrar?
evolross

3

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

  1. O texto longo estava cobrindo as setas nas outras soluções
  2. A imagem usada era uma seta combo para cima / para baixo um tanto velha e feia.

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:

selecione com seta branca

select{    
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgaWQ9IkxheWVyXzEiICAgZGF0YS1uYW1lPSJMYXllciAxIiAgIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIiAgIHZlcnNpb249IjEuMSIgICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxIHIxMzcyNSIgICBzb2RpcG9kaTpkb2NuYW1lPSJkb3dubG9hZC5zdmciPiAgPG1ldGFkYXRhICAgICBpZD0ibWV0YWRhdGE0MjAyIj4gICAgPHJkZjpSREY+ICAgICAgPGNjOldvcmsgICAgICAgICByZGY6YWJvdXQ9IiI+ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4gICAgICAgIDxkYzp0eXBlICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPiAgICAgIDwvY2M6V29yaz4gICAgPC9yZGY6UkRGPiAgPC9tZXRhZGF0YT4gIDxzb2RpcG9kaTpuYW1lZHZpZXcgICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiAgICAgYm9yZGVyb3BhY2l0eT0iMSIgICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiICAgICBncmlkdG9sZXJhbmNlPSIxMCIgICAgIGd1aWRldG9sZXJhbmNlPSIxMCIgICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTkyMCIgICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEwMjciICAgICBpZD0ibmFtZWR2aWV3NDIwMCIgICAgIHNob3dncmlkPSJmYWxzZSIgICAgIGlua3NjYXBlOnpvb209Ijg0LjMiICAgICBpbmtzY2FwZTpjeD0iMi40NzQ5OTk5IiAgICAgaW5rc2NhcGU6Y3k9IjUiICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMTkyMCIgICAgIGlua3NjYXBlOndpbmRvdy15PSIyNyIgICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjEiICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJMYXllcl8xIiAvPiAgPGRlZnMgICAgIGlkPSJkZWZzNDE5MCI+ICAgIDxzdHlsZSAgICAgICBpZD0ic3R5bGU0MTkyIj4uY2xzLTJ7ZmlsbDojNDQ0O308L3N0eWxlPiAgPC9kZWZzPiAgPHRpdGxlICAgICBpZD0idGl0bGU0MTk0Ij5hcnJvd3M8L3RpdGxlPiAgPHBvbHlnb24gICAgIGNsYXNzPSJjbHMtMiIgICAgIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIiAgICAgaWQ9InBvbHlnb240MTk4IiAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MSIgLz48L3N2Zz4=) no-repeat 101% 50%;
  padding-right:20px;
}

//, Você se importaria de explicar como e por que isso remove o brilho?
Nathan Basanese de

1
A solução tem basicamente dois componentes: 1. Solicitar que o navegador não faça nenhum estilo / exibição no elemento. 2. Forneça um estilo razoável. Em navegadores que não são terríveis (leia, não safari), o estilo de elemento fornecido pelo navegador é bom. No safari, no entanto, o estilo do navegador é nojento e terrível. Consequentemente, devemos substituir a exibição fornecida pelo navegador em cada navegador. As linhas que terminam em aparência: nenhuma faz a parte 1 de cima. As outras linhas tratam da parte 2. Isso ajuda?
Justin Edwards


0

Como mencionado várias vezes aqui

-webkit-appearance:none;

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.


-8

Se você inspecionar a folha de estilo do agente do usuário de Chome, você encontrará este

outline: -webkit-focus-ring-color auto 5px;

em suma, sua propriedade de contorno - torne-o Nenhum

isso deve remover o brilho


8
Ele não está perguntando sobre o contorno, mas sobre o fundo brilhante.
Apollo
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.