Representación extraña del botón de envío de CSS en iPad / iPhone

222

Me di cuenta de que si diseño mis botones con CSS usando radio, colores y bordes, se ven bien, pero en el iphone / ipad / ipod se ven terribles ... ¿no debería ser la misma representación que en Safari Desktop?

ingrese la descripción de la imagen aquí

iphone css ipad mobile-safari mobile-webkit Francesco
fuente

posible duplicado del estilo css para botones de entrada en ipad / iphone

skolima

Respuestas:

453

¡Uy! acabo de encontrarme: simplemente agregue esta línea en cualquier elemento que necesite

   -webkit-appearance: none;

Francesco
fuente

te amo, stackoverflow y @Francesco

jahrichie

Brillante, y aquí hay un gran artículo al respecto de trucos de CSS. Enumera todos los demás elementos modificados por WebKit y Mozilla.

Patrick

Compass tiene una mezcla para esto también compass-style.org/reference/compass/css3/appearance

Patrick Beeson

Desearía haber hecho esta búsqueda en Google hace 12 horas ... GRACIAS.

Elly Post

¡Realmente grandioso! ¡No pensé que este tipo de problema también ocurriera en iOS! ¡Una vez más, muchas gracias por esto!

Saurabh Prajapati

Agregue este código al archivo css:

input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

Esto ayudará.

subindas pm
fuente

¡Excelente! Formar botón de enviar ahora se ve como debería en mi iPad

peterkodermac

@peterkodermac, no olvide agregar la clase CSS principal, de lo contrario, esto puede afectar a todos los campos de entrada.

subindas pm

La respuesta anterior para la apariencia del kit web hizo la magia, pero el botón todavía se veía pálido / aburrido en comparación con el navegador en otros dispositivos / escritorio. También tuve que establecer la opacidad a completa (rangos de 0 a 1)

-webkit-appearance:none;
opactiy: 1

Después de configurar la opacidad, el botón se veía igual en todos los diferentes dispositivos / emulador / escritorio.

Priyank Thakkar
fuente