Desactiva el redondeo de elementos de entrada de iPhone / Safari

375

Mi sitio web funciona 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 bien en absoluto 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 según lo previsto?

html css iphone mobile-safari css-reset Alex
fuente
1
Me pregunto por qué NO Restablecer CSS parece contener esa regla css super fácil. Es una muerte mental.
Toskan
1
De hecho, creé un restablecimiento CSS basado en el restablecimiento CSS 2 de Eric Meyer con el CSS necesario agregado que encuentra en la respuesta aquí. Está disponible en github: github.com/Jossnaz/JossiCssReset
Toskan
1
Tenga cuidado con -webkit-appearance: none;, creo que es mejor limitar esta condición al alcance de un elemento de entrada específico. De lo contrario, puede ocultar elementos de entrada de radio si los tiene en la página.
cuas

Respuestas:

660

En iOS 5 y versiones posteriores, el buen border-radiustruco funciona:

input {
    border-radius: 0;
}

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

En las versiones heredadas, tenía que configurar en su -webkit-appearance: nonelugar:

input {
    -webkit-appearance: none;
}
BoltClock
fuente
1
A partir de iOS 5, esto solo eliminará la sombra interna. Verifique la respuesta de Piyush para eliminar también las esquinas redondeadas.
Jonathan Freeland
66
-webkit-appearanceen realidad no tiene nada que ver con la sombra interior y las esquinas redondeadas. No lo uses solo para eso. css-infos.net/property/-webkit-appearance
Rudie
14
"Si IOS quiere esquinas y sombras redondeadas, deje que los usuarios de IOS las tengan": eso es completamente inaceptable en mi situación, y probablemente también en la mayoría de los demás.
coredumperror
2
!! no debe usar este método, hace que la casilla de verificación no esté disponible Debido a esto, muchos de los usuarios de mi sitio no proceden en el acuerdo de pago. !!
synthresin
10
Para <input type="search">iOS 10 todavía lo necesitaba -webkit-appearance: none;.
Gabriel Smoljár
55

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

Intenta agregar -webkit-border-radius:0px;además.

justadev
fuente
1
Necesitaba agregar el -webkit-border-radiusatributo para <input type="text">eliminar las esquinas redondeadas en iOS 5.
Jonathan Freeland
No es necesario agregar px después del 0
mintedsky
42

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 use este código para la opción Seleccionar. Tendrá un problema en nuestra selección.

KoemsieLy
fuente
2
Descubrí que usar input[type]parece hacer el truco para todas las entradas.
JacobTheDev
11

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

input:not([type="radio"]):not([type="checkbox"]) {
    -webkit-appearance: none;
    border-radius: 0;
}
François Romain
fuente
7

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
}
Johansrk
fuente
14
Solo una nota, el @include border-radius(0);mixin solo está disponible si lo ha definido usted mismo o está utilizando el marco de Compass, no solo Vanilla SASS.
waffl
Solo una nota, si estás usando SCSS, probablemente también deberías estar usando autoprefixer.
Christian
6

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;}

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

Chris Bernardi
fuente
5

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

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

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

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

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

Henrik N
fuente
4

Por favor, pruebe este:

Intenta agregar inputCss de esta manera:

 -webkit-appearance: none;
       border-radius: 0;
Ivin Raj
fuente
3

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

Jesse
fuente
0

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

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