Dando estilo a los botones para Mobile Safari


Publicado el: 1 de septiembre, 2010

Botones en 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.

Custom Solutions for your business

Experience, Quality and Security

Contact us