iOS fuerza esquinas redondeadas y deslumbramiento en las entradas

Los dispositivos IOS agregan muchos estilos molestos en las entradas de formularios, 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:

Desktop

IPad:

iPad

La entrada[type=text] usa un recuadro de sombra CSS e incluso especificé-webkit-border-radius:none; que aparentemente se anula. El color y la forma de mi entrada[type=submit] botón se queda completamente bastardizado en el iPad. Hacer ¿alguien sabe lo que puedo hacer para arreglar esto? Gracias de antemano.

Author: inorganik, 2011-09-29
Source

5 answers

La versión que tenía trabajando es:

input {
    -webkit-appearance: none;
}

En algunas versiones del navegador webkit, también puede encontrarse con border-radius todavía en su lugar. Restablecer con lo siguiente: 

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

Esto se puede extender para aplicar a todos los componentes form de estilo webkit como input, select, button o textarea.

En referencia a la pregunta original, no usaría el valor 'none' al borrar cualquier elemento css basado en unidades. También tenga en cuenta que esto oculta las casillas de verificación en Chrome, por lo que tal vez use algo como input[type=text] o input:not([type=checkbox]), input:not([type=radio]) en su lugar.

 171
Author: marksyzm,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-09-10 09:49:07

Usted puede deshacerse de algunos más webkits formulario, entrada, etc. estilo con esto: 

input, textarea, select {
   -webkit-appearance: none;
}
 17
Author: nick,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-02-07 18:30:53

Para el botón enviar no use: 

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

En su lugar use la etiqueta button: 

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

Esto funcionó para mí.

 4
Author: Digital Robot Gorilla,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-04-03 18:06:33

Echa un vistazo a normalizar.css

Hay una demo donde puedes probar los elementos del formulario y ver cómo se ven en ios. Hay múltiples propiedades orientadas a webkit.

 1
Author: Rdpi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-10-18 10:36:39

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; 
}
 1
Author: Waqar Alamgir,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-19 16:55:54