css - tabla - iOS fuerza las esquinas redondeadas y deslumbra en las entradas

redondear imagen html

Question

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:

iPad:

La entrada [tipo = texto] usa un recuadro de sombreado CSS e incluso he especificado -webkit-border-radius: none; que aparentemente es anulado. El color y la forma de mi botón de entrada [type = submit] se bastardiza completamente en el iPad. ¿Alguien sabe lo que puedo hacer para arreglar esto? Gracias por adelantado.

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

Answer 2

La versión que tuve trabajando es:

input {
    -webkit-appearance: none;
}

En algunas versiones de navegador webkit, es posible que también tenga que ver con el border-radius del border-radius sigue en su lugar. Restablecer con lo siguiente:

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

Esto se puede ampliar para aplicarlo a todos los componentes de form estilo de webkit, como input , select , button o área de 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, por lo que quizás utilice algo como input[type=text] o input:not([type=checkbox]), input:not([type=radio]) .

Answer 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í.

Answer 4

Puede deshacerse de algunos estilos de webkits más, entrada, etc. estilizando con esto:

input, textarea, select {
   -webkit-appearance: none;
}

Answer 5

echar un vistazo para normalize.css

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