Dando estilo a los botones para Mobile Safari

En ThinkVitamin nos dan un pequeño tip para un problema algo molestoso: los botones de submit en Mobile Safari.

Los botones para submit pierden sus estilos cuando vemos la página en Mobile Safari. Mobile Safari es Safari modificado para dispositivos móbiles como la iPod/iPhone/iPad de Apple. Por ejemplo tenemos el siguiente código CSS que se aplica a un botón de submit:

input[type="submit"] {
    background: #262C32;
    width: 150px;
    padding: 9px;
    letter-spacing: 1px;
    border: none;
    color: #EFDDA8;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

Este se desplegará de manera normal en los otros browsers pero Mobile Safari obviará el estilo de esta manera:

Solución

La solución es colocar la propiedad “-webkit-appearance: none;”

input[type="submit"] {
    background: #262C32;
    width: 150px;
    padding: 9px;
    letter-spacing: 1px;
    border: none;
    color: #EFDDA8;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -webkit-appearance: none;
}

Pueden probarla acá -> https://www.eresseasolutions.com/pruebas/submit.html.