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.

Hola! Soy un Desarrollador Web, trabajo con frameworks PHP y Tecnologías Front-End.

Ver todos mis artículos »

     

Comentarios

  1. Correcto Funciona. Gracias

    Alberto — marzo 23, 2015 @ 1:22 pm

  2. Me salvaste la vida estuve horas buscando esta solucion y no sabia ni como formular la pregunta, si tienes mas tips acerca de desarrollo mobil para safari agradeceria lo compartieras >.<

    Por cierto sabrás como eliminar los menus que genera mobile safari en iphone?

    Johanbertnoviembre 8, 2015 @ 4:26 am