Desactivar el redondeo de elementos de entrada de iPhone/Safari
Mi sitio web se muestra bien en el navegador iPhone/Safari, con una excepción: mis campos de entrada de texto tienen un estilo redondeado extraño que no se ve nada bien con el resto de mi sitio web.
¿Hay alguna manera de indicarle a Safari (a través de CSS o metadatos) que no redondee los campos de entrada y los haga rectangulares como se esperaba?
En iOS 5 y posteriores:
input {
border-radius: 0;
}
input[type="search"] {
-webkit-appearance: none;
}
Si solo debe eliminar las esquinas redondeadas en iOS o por algún motivo no puede normalizar las esquinas redondeadas en todas las plataformas, use input { -webkit-border-radius: 0; }la propiedad en su lugar, que aún es compatible. Por supuesto, tenga en cuenta que Apple puede optar por dejar de admitir la propiedad con prefijo en cualquier momento, pero considerando sus otras características CSS específicas de la plataforma, es probable que la mantengan.
En las versiones heredadas, tenías que configurar -webkit-appearance: none:
input {
-webkit-appearance: none;
}
input -webkit-appearance: none;solo no funciona.
Intente agregar -webkit-border-radius:0px;además.
Es la mejor forma de eliminar lo redondeado en IOS.
textarea,
input[type="text"],
input[type="button"],
input[type="submit"] {
-webkit-appearance: none;
border-radius: 0;
}
Nota: No utilice este código para Seleccionar opción. Tendrá problemas en nuestra selección.
