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

Sur les appareils Mac et iOS, dans Safari, un élément avec une couleur d’arrière-plan génère un gloss 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 de fond que je veux, mais le gloss est toujours là. Est-ce que quelqu’un sait comment en faire une couleur plate?

@beanland; Il faut écrire

 -webkit-appearance:none;

dans votre css.

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

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

Découvrez -webkit-apparence: aucune et ses dérivés. Décrit à l’origine par Chris Coyer ici: https://css-sortingcks.com/almanac/properties/a/appearance/

Si vous inspectez le UserSype StyleSheet de Chome, vous trouverez ceci

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

en bref sa propriété de contour – le faire aucun

cela devrait enlever la lueur