iOS fuerza esquinas redondeadas y deslumbramiento en las entradas

94

Los dispositivos iOS agregan muchos estilos molestos en las entradas de formulario, particularmente en la entrada [type = submit]. A continuación se muestra el mismo formulario de búsqueda simple en un navegador de escritorio y en un iPad.

Escritorio:

Escritorio

iPad:

iPad

La entrada [type = text] usa un recuadro CSS en forma de sombra e incluso especifiqué -webkit-border-radius: none; que aparentemente se anula. El color y la forma de mi botón de entrada [tipo = enviar] se vuelven completamente bastardos en el iPad. ¿Alguien sabe qué puedo hacer para solucionar este problema? Gracias por adelantado.

css ios forms inorgánico
fuente
4
-aparición del kit de web: ninguna; Ayuda a eliminar la mayoría de los problemas, pero aún no elimina el espacio entre los dos elementos o las esquinas redondeadas. Así que cualquier ayuda será apreciada. Gracias.
inorganik
2
Usted especificó -webkit-border-radius:none;, ¿especificó border-radius:none;?
Rigel Glen
7
¡Especificando -webkit-appearance:nonee -webkit-border-radius:0hizo el truco en iOS por mí!
Primus202

Respuestas:

182

La versión que tenía funcionando es:

input {
    -webkit-appearance: none;
}

En algunas versiones del navegador webkit, es posible que también se enfrente a que border-radiustodavía esté en su lugar. Reinicie con lo siguiente:

input {
    -webkit-border-radius:0; 
    border-radius:0;
}

Esto se puede extender a aplicarse a todos los webkit estilo formcomponentes tales como input, select, buttono textarea.

En referencia a la pregunta original, no usaría el valor 'ninguno' al borrar cualquier elemento css basado en unidades. También tenga en cuenta que esto oculta las casillas de verificación en Chrome, así que tal vez use algo como input[type=text]o input[type=submit], input[type=text](tenga en cuenta que input:not([type=checkbox]), input:not([type=radio])se aplicará a todos los tipos de entrada, ya que cada entrada satisface cualquiera de esas dos condiciones).

marksyzm
fuente
5
-aparición del kit de web: ninguna; Oculta casillas de verificación en Chrome, ¡no es una solución válida!
Nico Westerdale
2
-aparición del kit de web: ninguna; ¡Hace el truco! (-webkit-border-radius no es necesario)
OZZIE
Buen punto: según he descubierto, depende de la versión del navegador, así que está ahí para una prueba de fallos. Editaré la publicación por relevancia.
marksyzm
3
input: not ([type = "checkbox"]) sería una mejor manera de evitar el problema en Chrome? Aunque no funcionaría en IE <= 8, pero, de nuevo, eso no es lo que estás tratando de arreglar.
Robin French
Usar input:not([type=checkbox]), input:not([type=radio])significa que el estilo se aplica a todos los botones de Safari, ya que cada botón cumple una de esas dos condiciones. En cambio, usé input[type=submit], input[type=text].
miguelmorin hace
17

Puede deshacerse de algunos estilos de formularios, entradas, etc. de más webkits con esto:

input, textarea, select {
   -webkit-appearance: none;
}
mella
fuente
Todavía necesitaría border-radius: 0;reiniciarse por completo y no quiere un radio de borde. De lo contrario, configure el border-radius.
Refilon
3

Para el botón de enviar, no use:

<input type="submit" class="yourstylehere" value="submit" />

En su lugar, use la etiqueta del botón:

<button type="submit" class="yourstylehere">Submit</button>

Esto funcionó para mí.

Gorila robot digital
fuente
1
FWIW, acabo de tener este problema en un proyecto, y el iPad 1 en el que estaba probando también agregó estilos a las <button>etiquetas. Así que creo que es mejor resolver esto con CSS directamente.
Neemzy
1

echa un vistazo a normalize.css

Hay una demostración en la que puede probar los elementos del formulario y ver cómo se ven en ios. Hay varias propiedades orientadas a webkit.

Rdpi
fuente
1

Esto es lo que uso en mis proyectos.

* { 
    -webkit-tap-highlight-color: transparent; 
}
a, article, div, h1, h2, h3, h4, h5, h6, img, section, span {
    -moz-user-select: none; 
    -webkit-user-select: none; 
}
input, select, textarea { 
    -webkit-appearance: none; 
    -webkit-border-radius:0; 
    border-radius: 0; 
}
Waqar Alamgir
fuente
0

También tiene este problema en algunos navegadores si tiene lo siguiente:

<a class="btn btn-primary" href="#" type="button">Link</a>

en vez de:

<a class="btn btn-primary" href="#" role="button">Link</a>

Esto puede suceder si cambia su elemento de entrada por un elemento anker y se olvida de cambiar typea role.

Tuve este problema tanto en Chrome como en Safari en mi iPad.

Puñal
fuente