Por qué Safari no aplica tu CSS (y cómo solucionarlo con appearance: none)

Si trabajas en diseño web o desarrollo front-end, probablemente alguna vez te encontraste con este problema:

“En Chrome se ve perfecto, pero en Safari el <select> no toma el estilo.”

Esto sucede porque Safari utiliza controles de formulario nativos del sistema operativo (macOS o iOS). En otras palabras, ignora parte del CSS para mantener la estética de Apple.
Esto afecta especialmente a los campos como:

<select>
<input type="date">
<input type="search">
<input type="range">
y otros inputs con apariencia especial.

Índice

Qué hace la propiedad `appearance`

La propiedad CSS appearance permite controlar si un elemento usa el estilo del sistema o el del desarrollador.
Cuando Safari encuentra un <select>, lo renderiza con el diseño de macOS o iOS, sin importar tus reglas de border, background o padding.

Para recuperar el control del diseño, solo tenés que indicarle al navegador que no use la apariencia nativa:

Ejemplo práctico

Supongamos que tenés un formulario de contacto con el siguiente CSS:

En Chrome se ve perfecto, pero en Safari el select mantiene su estilo gris y su flecha clásica.
Para que Safari respete tu diseño, simplemente añadí:

Y si querés reemplazar la flecha del select con una personalizada:

Consejos extra para compatibilidad total

Para lograr un estilo de formulario coherente en todos los navegadores:

Usá siempre las tres líneas:
-webkit-appearance, -moz-appearance y appearance.
Agregá un reset CSS global:
input, select, textarea, button { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; }
Probá siempre en Safari real o en iPhone/iPad, ya que el motor de renderizado es diferente a Chrome o Edge.
Cuidá la accesibilidad: si eliminás el estilo nativo, asegurate de mantener buena visibilidad del foco (:focus).

Safari puede ser el navegador más exigente para los diseñadores, pero con la propiedad appearance: none podés garantizar que tus formularios se vean igual en todos los dispositivos.
De esta manera, mantenés la coherencia visual de tu marca y ofrecés una mejor experiencia de usuario.

Y esta solución es solo para select o es válido para otras personalizaciones?

Excelente pregunta 👌
La propiedad appearance: none no es exclusiva de los <select>, aunque ahí es donde más se nota el problema.
En realidad, sirve para cualquier elemento de formulario o interfaz al que el navegador aplique un estilo nativo (propio del sistema operativo).

💡 En resumen:

appearance: none le dice al navegador:

“No uses tu estilo predefinido, quiero aplicar completamente el mío.”

🧱 Elementos donde es útil (y comúnmente necesario)

✅ 1. `<select>`

Safari, iOS y macOS ignoran varios estilos (bordes, fondo, flecha).
Con appearance: none podés aplicar tu diseño y usar una flecha SVG o ícono personalizado.

✅ 2. `<input type="date">`

Safari y Chrome muestran un selector de calendario nativo.
Con appearance: none podés ocultar ese ícono y usar uno propio.

(Luego podrías agregar un ícono con background-image o un pseudo-elemento ::after.)

✅ 3. `<input type="search">`

Safari agrega automáticamente una “X” (botón de limpiar) y un icono de lupa.
Con -webkit-appearance: none; podés quitarlos.

✅ 4. `<input type="range">` (sliders)

Muy útil si querés personalizar el thumb y el track del slider.
Sin esto, Safari y Chrome aplican sus propios estilos redondeados.

✅ 5. `<button>` y `<input type="submit">`

Safari y Firefox aplican un fondo gris azulado con borde 3D.
Con appearance: none lo convertís en un botón plano que podés estilizar con tus colores, sombras, y efectos hover.

⚠️ Dónde no conviene usarlo

En formularios donde deseás conservar la apariencia nativa (por ejemplo, apps móviles o sitios que imitan el sistema operativo).
Si eliminás la apariencia nativa, tenés que recrear los estados de enfoque (:focus) para mantener la accesibilidad.