Evite que Safari Mobile dé esquinas redondeadas a los botones de entrada

82

Supongo que el sujeto lo dice todo. Tengo una aplicación web cuando la veo en un Iphone, Ipod o Ipad, los botones de envío de entrada tienen esquinas redondeadas. ¿Hay alguna forma de detener esto?

ios mobile-safari Novato Fletcher
fuente

Respuestas:

185

Si agrega ...

input, textarea {
  -webkit-appearance: none;
  border-radius: 0;
}

Entonces sus botones heredarán cualquier estilo CSS que haya aplicado a otros navegadores.

metodofaccion
fuente
1
Esto no funciona en iPad2, iOS 5.1.1. Sin embargo, no puedo estar seguro de que no funcione en otros dispositivos iOAS, ya que no tengo ninguno para probarlo. Sin embargo, de Roel -webkit-border-radius:0pxsolución hace el trabajo.
coredumperror
Si no aplica -webkit-apariencia: ninguno, Safari se vuelve exigente con las propiedades que se pueden aplicar en él (es decir, font-sizey color. La mejor solución sería aplicar ambos.)
Methodofaction
Informar para confirmar que esta solución funciona para iPad, iOS 5.1.1.
Dominor Novus
6
respondiendo a un comentario de un niño de 2 años ... bueno. -aparición del kit de web: ninguna; hace que las casillas de verificación no sean visibles en Chrome. Probablemente también afecte a otros elementos y navegadores.
matthew_360
¡¡¡GUAU!!! Estuvimos buscando durante horas para solucionar esto en una aplicación de Córdoba y esta fue la solución. ¡No puedo votar esto lo suficiente!
Jay Dinse
18

No funcionó para mí, la apariencia de -webkit: ninguna.

Esto hace:

input[type=submit] {
    -webkit-border-radius:0px;
}

Tuve el mismo problema con las esquinas redondeadas en un botón con imagen de fondo, solo en el iPhone.

Roel
fuente
1
Confirmación: la respuesta más votada aquí (por Duopixel) no funciona, pero la respuesta de Roel sí. Esto probablemente se deba a un cambio realizado en la implementación del kit web móvil de Apple en los meses intermedios.
coredumperror
@CoreDumpError: quiere decir que no funciona para usted . La solución funcionó para mí, la acabo de implementar. No estoy seguro de por qué estamos experimentando resultados diferentes. Por otra parte, su publicación se realizó hace más de medio año, por lo que no puedo decir si todavía está experimentando el mismo problema.
Dominor Novus
@Roel, ¿simplemente puede tener problemas de precedencia ...?
Frank Nocke
6

Descubrí que en el iPad 2 debes usar lo siguiente:

-webkit-appearance:none;
border-radius: 0;

en su clase de botones.

Daniele F.
fuente
3

Tenía un sitio con un tipo de envío de entrada = "imagen". Esta variación de lo anterior fijó las esquinas redondeadas:

input[type=image] {
    -webkit-border-radius:0px;
}
RevConcept
fuente
1

Descubrí que la configuración background: linear-gradient(color1, color2)elimina las esquinas excesivamente redondeadas en los dispositivos Apple y funciona en todos los demás navegadores / plataformas que he probado.

mait
fuente
Esto me solucionó y me parece que es la opción menos probable para tener efectos secundarios no deseados.
Wim Deblauwe
1

Lo resolví agregando código para los tipos "botón" y "enviar":

   input[type="submit"] {
   text-align: center;
        -webkit-appearance:none;
        -webkit-border-radius:0px;
        border-radius:0;
        height:30px;
    }

    input[type="button"] {
        text-align: center;
        -webkit-appearance:none;
        -webkit-border-radius:0px;
        border-radius:0;
        height:30px;
    }
AGalvis
fuente