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í

— 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