css - reinstalar - ¿Cómo puedo eliminar el brillo de un elemento seleccionado en Safari en Mac?

donde esta el menu de safari en ipad

Question

En Mac y dispositivos iOS, en Safari, un elemento <select> con un color de fondo genera un brillo sobre sí mismo. Esto no parece suceder en otros sistemas operativos.

Por ejemplo, tengo un elemento selecto con estas propiedades 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;
}

Y mi elemento tiene el color de fondo que quiero, pero el brillo todavía está allí. ¿Alguien sabe cómo hacer que sea un color plano?

Answer 1

@beanland; Tu tienes que escribir

-webkit-appearance:none;

en tu css.

lea esto http://trentwalton.com/2010/07/14/css-webkit-appearance/

Answer 2

Echa un vistazo a -webkit-appearance: none y sus derivados. Originalmente descrito por Chris Coyer aquí: https://css-tricks.com/almanac/properties/a/appearance/

Answer 3

Si inspecciona el User Agent StyleSheet of Chome, encontrará esto

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

en resumen, su propiedad de esquema: hazlo Ninguno

eso debería eliminar el brillo

Answer 4

Uso de -webkit-appearance:none; eliminará también las flechas que indican que esto es un menú desplegable.

Vea este fragmento que lo hace funcionar en diferentes navegadores y agrega flechas personalizadas sin incluir ningún archivo de imagen:

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>