html - Desactivar redondeo de elementos de entrada de iPhone/Safari

css mobile-safari

Question

Mi sitio web se desempeña bien en el navegador iPhone / Safari, con una excepción: los campos de entrada de texto tienen un estilo redondeado extraño que no se ve bien con el resto de mi sitio web.

¿Hay alguna forma de indicar a Safari (a través de CSS o metadatos) que no redondee los campos de entrada y los haga rectangulares según lo previsto?

Answer 1

Aquí está la solución completa para Compass (SCSS):

input {
-webkit-appearance: none; // remove shadow in iOS
@include border-radius(0); // remove border-radius in iOS
}

Answer 2

En iOS 5 y versiones posteriores, good ol '' border-radius hace el truco:

input {
border-radius: 0;
}

Si solo debe eliminar las esquinas redondeadas en iOS o, por alguna razón, no puede normalizar las esquinas redondeadas en las plataformas, use la -webkit-border-radius prefijada -webkit-border-radius , que aún es compatible. Por supuesto, tenga en cuenta que Apple puede optar por abandonar el soporte para la propiedad prefijada en cualquier momento, pero teniendo en cuenta sus otras características de CSS específicas de la plataforma, es probable que lo mantengan cerca.

En las versiones heredadas tenías que configurar -webkit-appearance: none lugar:

input {
-webkit-appearance: none;
}

Answer 3

Es la mejor manera de eliminar el 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 la opción de selección. Tendrá problema en nuestra selección.

Answer 4

La respuesta aceptada hizo que el botón de radio desapareciera en Chrome. Esto funciona:

input:not([type="radio"]):not([type="checkbox"]) {
-webkit-appearance: none;
border-radius: 0;
}

Answer 5

Para mí en iOS 5.1.1 en un iPhone 3GS tuve que borrar el estilo de un campo de búsqueda y configurarlo al estilo deseado.

input[type="search"] {-webkit-appearance: none; border-radius: 0 3px 3px 0;}

Haciendo -webkit-border-radius: 0; solo no se borró el estilo nativo. Esto también fue para una vista web en una aplicación nativa.

Answer 6

Para poder representar correctamente los botones en Safari y otros navegadores, deberá asignar un estilo específico para los botones además de configurar la apariencia del kit de web a ninguno, por ejemplo:

border-radius: 0;
-webkit-appearance: none;
background-image: linear-gradient(to bottom, #e4e4e4, #f7f7f7);
border: 1px solid #afafaf

Answer 7

Por favor, pruebe este:

Intenta agregar input CSS como esta:

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

Answer 8

Si usa normalize.css, esa hoja de estilo hará algo como input[type="search"] { -webkit-appearance: textfield; } input[type="search"] { -webkit-appearance: textfield; } .

Esto tiene una especificidad más alta que un solo selector de clase como .foo , así que ten en cuenta que no puedes hacer solo .my-field { -webkit-appearance: none; } .my-field { -webkit-appearance: none; } . Si no tiene una manera mejor de lograr la especificidad correcta, esto ayudará:

.my-field { -webkit-appearance: none !important; }

Answer 9

Tuve el mismo problema pero solo para el botón de enviar. Necesario para eliminar la sombra interior y las esquinas redondeadas.

input[type="submit"] { -webkit-appearance:none; -webkit-border-radius:0; }

Answer 10

Utilicé un radio de borde simple: 0; para eliminar las esquinas redondeadas para los tipos de entrada de texto.

Answer 11

input -webkit-appearance: none; solo no funciona.

Intente agregar -webkit-border-radius:0px; Adicionalmente.