Comment puis-je supprimer le brillant sur un élément sélectionné dans Safari sur Mac?

113

Sur les Mac et les appareils iOS, dans Safari, un <select>élément avec une couleur d'arrière-plan génère une brillance sur lui-même. Cela ne semble pas se produire dans d'autres systèmes d'exploitation.

Par exemple, j'ai un élément select avec ces propriétés de style:

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;
}

Et mon élément a la couleur d'arrière-plan que je veux, mais le brillant est toujours là. Est-ce que quelqu'un sait comment en faire une couleur plate?

css macos safari drop-down-menu background-color Ian Hunter
la source

Réponses:

195

@beanland; Tu dois écrire

-webkit-appearance:none;

dans votre css.

lisez ceci http://trentwalton.com/2010/07/14/css-webkit-appearance/

sandeep
la source
4
pas besoin de merci car il y a beaucoup de choses que je ne savais pas :)
sandeep
123
Existe-t-il un moyen de garder la flèche sur le côté droit? Je veux remplacer uniquement la couleur. Merci
Marc
19
@sandeep: Et pour le rendre multi-navigateurs:-moz-appearance: none; -webkit-appearance: none; appearance: none;
Dorian
6
@Marc Si après 3 ans vous êtes toujours intéressé .. J'ai ajouté une solution que j'ai trouvée pour faire apparaître les flèches.
alicjasalamon
2
La solution pour IE est d'utiliser select :: - ms-expand {display: none; } pour masquer l'icône de la liste déroulante de la boîte de sélection IE native, puis utilisez une image png réelle comme arrière-plan de la nouvelle icône. Le problème se produit car les images SVG ne sont pas toujours positionnées correctement via CSS dans IE.
Phyllis Sutherland
107

L'utilisation -webkit-appearance:none;supprimera également les flèches indiquant qu'il s'agit d'une liste déroulante.

Voir cet extrait qui le fait fonctionner dans différents navigateurs et ajoute des flèches personnalisées sans inclure de fichiers image:

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>
Développer l'extrait

alicjasalamon
la source
16
doux, apprécie la correction des flèches! voici une version avec fond transparent: sélectionnez {background: url (data: image / svg + xml; base64, PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU + LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM + PHRpdGxlPmFycm93czwvdGl0bGU + PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjEuNDEgNC42NyAyLjQ4IDMuMTggMy41NCA0LjY3IDEuNDEgNC42NyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIzLjU0IDUuMzMgMi40OCA2LjgyIDEuNDEgNS4zMyAzLjU0IDUuMzMiLz48L3N2Zz4 =) no-repeat 95% 50%; }
Ingo Renner
1
fait une flèche transparente (impossible de coller ici en raison de la longueur): pastebin.com/HQ0x4Rka
mga
5
Si vous avez une large sélection d'éléments, cela aura l'air un peu bizarre. Pour résoudre ce problème, vous pouvez utiliser les décalages de bord de position d'arrière-plan de CSS3 pour mieux aligner l'arrière-plan. Remplacez donc no-repeat 95% 50%parno-repeat right 2px center
iSWORD
3
Les mêmes flèches mais en blanc et transparent pastebin.com/07iS41b5
Andreas Gassmann
2
Je remarque que les flèches ajoutées incluent à la fois une flèche haut / bas - une solution rapide juste pour afficher la flèche vers le bas habituelle?
Brett
14

Version 2019

URL d'image intégrée plus courte, affiche uniquement la flèche vers le bas, couleur de la flèche personnalisable ...

Depuis https://codepen.io/jonmircha/pen/PEvqPa

L'auteur est probablement 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;
}
Noel Abrahams
la source
1
La background-colorpropriété s'applique à l'arrière-plan de l'élément de sélection. Pour changer la couleur de la flèche vers le bas, vous devez changer la propriété de remplissage SVG dans l'URL, par exemplefill='%23fc0000'
Noel Abrahams
Mieux vaut utiliser background-position sans calc: background-position: right .8em top 60%; et un curseur: est nécessaire
Iggy
Existe-t-il une version à double flèche de ce que quelqu'un peut démontrer?
evolross le
3

Désolé d'empiler sur un ancien objet. J'ai trouvé des réponses partielles à mes questions ici, mais j'ai dû faire du travail, je voulais donc partager mes résultats pour la personne suivante.

J'ai fini par utiliser la même approche que les autres contributeurs, mais avec quelques ajustements pour corriger les problèmes suivants

  1. Un long texte couvrait les flèches dans les autres solutions
  2. L'image utilisée était une flèche combinée haut / bas quelque peu ancienne et laide.

Ce qui suit vous donnera une solution de travail avec les problèmes ci-dessus résolus. Remarque: j'ai utilisé une flèche blanche pour mon cas d'utilisation, vous devrez peut-être changer la couleur de la flèche pour la vôtre.

voici un aperçu:

sélectionner avec une flèche blanche

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;
}
Justin Edwards
la source
//, Voudriez-vous expliquer comment et pourquoi cela supprime le brillant?
Nathan Basanese
1
La solution a essentiellement deux composants: 1. Demander que le navigateur ne fasse aucun style / affichage sur l'élément. 2. Fournissez un style raisonnable. Dans les navigateurs qui ne sont pas terribles (lecture, pas safari), le style d'élément fourni par le navigateur est bon. En safari, le style du navigateur est dégoûtant et terrible. Par conséquent, nous devons remplacer l'affichage fourni par le navigateur dans chaque navigateur. Les lignes se terminant en apparence: aucune ne fait la partie 1 d'en haut. Les autres lignes abordent la partie 2. Cela vous aide-t-il?
Justin Edwards
0

Comme mentionné à plusieurs reprises ici

-webkit-appearance:none;

supprime également les flèches, ce qui n'est pas ce que vous voulez dans la plupart des cas.

Une solution de contournement simple que j'ai trouvée est d'utiliser simplement select2 au lieu de select. Vous pouvez également modifier le style d'un élément select2, et surtout, select2 a le même aspect sur Windows, Android, iOS et Mac.

CharlesT
la source
-8

Si vous inspectez la feuille de style de l'agent utilisateur de Chome, vous trouverez ceci

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

en bref sa propriété de contour - le rendre None

qui devrait supprimer la lueur

Surajnaikin
la source
8
Il ne pose pas de questions sur le contour, mais sur le fond brillant.
Apollo