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

112

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

Por ejemplo, tengo un elemento de selección 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 sigue ahí. ¿Alguien sabe cómo convertirlo en un color plano?

css macos safari drop-down-menu background-color Ian Hunter
fuente

Respuestas:

194

@beanland; Tu tienes que escribir

-webkit-appearance:none;

en tu css.

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

sandeep
fuente
4
no hay necesidad de agradecer porque hay muchas cosas que no sabía :)
sandeep
123
¿Hay alguna forma de mantener la flecha en el lado derecho? Quiero anular solo el color. Gracias
Marc
19
@sandeep: Y para que sea de navegadores cruzados:-moz-appearance: none; -webkit-appearance: none; appearance: none;
Dorian
6
@Marc Si después de 3 años todavía estás interesado ... agregué una solución que encontré para mostrar las flechas.
alicjasalamon
2
La solución para IE es usar select :: - ms-expand {display: none; } para ocultar el ícono desplegable nativo del cuadro de selección de IE, luego use una imagen png real como fondo para el nuevo ícono. El problema ocurre porque las imágenes SVG no siempre se posicionan correctamente a través de CSS en IE.
Phyllis Sutherland
106

El uso -webkit-appearance:none;eliminará también las flechas que indican que se trata de 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>
Expandir fragmento

alicjasalamon
fuente
16
dulce, aprecio el arreglo de flechas! Aquí hay una versión con el fondo transparente: seleccionar {background: url (datos: image / svg + xml; base64, PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU + LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM + PHRpdGxlPmFycm93czwvdGl0bGU + PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjEuNDEgNC42NyAyLjQ4IDMuMTggMy41NCA0LjY3IDEuNDEgNC42NyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIzLjU0IDUuMzMgMi40OCA2LjgyIDEuNDEgNS4zMyAzLjU0IDUuMzMiLz48L3N2Zz4 =) no-repeat 95% 50%; }
Ingo Renner
1
hizo una flecha transparente (no se pudo pegar aquí debido a la longitud): pastebin.com/HQ0x4Rka
mga
5
Si tiene elementos de selección amplia, esto se verá un poco apagado. Para solucionarlo, puede utilizar los desplazamientos de borde de posición de fondo de CSS3 para alinear mejor el fondo. Así que reemplace no-repeat 95% 50%conno-repeat right 2px center
iSWORD
3
Las mismas flechas pero en pastebin.com/07iS41b5
Andreas Gassmann
2
Noto que las flechas agregadas incluyen tanto una flecha hacia arriba como hacia abajo, ¿alguna solución rápida solo para mostrar la flecha hacia abajo habitual?
Brett
14

Versión 2019

URL de imagen en línea más corta, muestra solo la flecha hacia abajo, color de flecha personalizable ...

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

El autor es probablemente 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
fuente
1
La background-colorpropiedad se aplica al fondo del elemento seleccionado. Para cambiar el color de la flecha hacia abajo, debe cambiar la propiedad de relleno SVG en la URL, por ejemplofill='%23fc0000'
Noel Abrahams
Es mejor usar background-position sin calc: background-position: right .8em top 60%; y algo de cursor: se necesita
Iggy
¿Hay una versión de doble flecha de esto que alguien pueda demostrar?
evoluross
3

Siento acumular un artículo antiguo. Encontré respuestas parciales a mis preguntas aquí, pero tuve que trabajar un poco, así que quería compartir mis resultados con la siguiente persona.

Terminé usando el mismo enfoque que los otros colaboradores, pero con algunos ajustes para corregir lo siguiente

  1. El texto largo cubría las flechas en las otras soluciones
  2. La imagen que se estaba utilizando era una flecha combinada arriba / abajo algo vieja y fea.

Lo siguiente le dará una solución funcional con los problemas anteriores resueltos. Nota: utilicé una flecha blanca para mi caso de uso, es posible que deba cambiar el color de la flecha por el suyo.

aquí hay una vista previa:

seleccionar con flecha blanca

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
fuente
//, ¿Te importaría explicar cómo y por qué se quita el brillo?
Nathan Basanese
1
La solución tiene básicamente dos componentes: 1. Solicitar que el navegador no haga ningún estilo / visualización en el elemento. 2. Proporcione un estilo razonable. En los navegadores que no son horribles (lectura, no safari), el estilo del elemento proporcionado por el navegador es bueno. En Safari, sin embargo, el estilo del navegador es repugnante y terrible. En consecuencia, debemos anular la visualización proporcionada por el navegador en cada navegador. Las líneas que terminan en apariencia: ninguna hace la parte 1 desde arriba. Las otras líneas abordan la parte 2. ¿Eso ayuda?
Justin Edwards
0

Como se mencionó varias veces aquí

-webkit-appearance:none;

también elimina las flechas, que no es lo que desea en la mayoría de los casos.

Una solución fácil que encontré es simplemente usar select2 en lugar de select. También puede cambiar el estilo de un elemento select2 y, lo más importante, select2 tiene el mismo aspecto en Windows, Android, iOS y Mac.

CharlesT
fuente
-8

Si inspecciona la hoja de estilo del agente de usuario de Chome, encontrará esta

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

en resumen, su propiedad de contorno: hazlo Ninguno

eso debería quitar el resplandor

Surajnaikin
fuente
8
No pregunta por el contorno, sino por el fondo brillante.
Apollo