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.
Correcto Funciona. Gracias
Alberto — marzo 23, 2015 @ 1:22 pm
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?
Johanbert — noviembre 8, 2015 @ 4:26 am