Mostrar falla con número de tipo de entrada HTML en iPhone iOS/Safari

Question

Quiero usar HTML Entrada tipo = "número" en una aplicación móvil, para indicar a los teléfonos móviles más inteligentes (Android, iPhone y algunos otros), que el teclado numérico es más interesante para el usuario que el normal. Esto funciona bien.

Entonces, tengo este pedazo de HTML aquí:

<h3>type="number"</h3>
<input type="number" class="input-number"/>
<h3>type="text"</h3>
<input type="text" class="input-text"/>

Los elementos CSS importantes aplicados aquí son:

input {
  height: 2em;
  padding: 0.2em 0.5em;
  width: 100%;

  /* avoid iPhone rounded corners */
  border: 1px solid #afb7c1;
  border-collapse: collapse;
  border-radius: 0 0 0 0;
}

.input-number {
  text-align: right;
}

Cual debería renderizado así:

Lo anterior es una captura de pantalla tomada de iOS 4.1, donde el mundo todavía estaba bien. También en teléfonos Android, todo funciona bien. Pero mira lo que sucede en iOS 4.2, 4.3:

De repente, el campo Número es un poco menos ancho, casi como si el iPhone quisiera dejar espacio para esa hilera inútil que aparece en algunos navegadores cuando la entrada tiene tipo = "número".

¿Alguien es consciente de tal problema? ¿Cómo lo arreglaste? O trabajar a su alrededor? ¿Hay alguna otra forma de hacer que los móviles prefieran el teclado numérico? ¿O hay algún estilo CSS patentado que pueda aplicar para deshacer este margen derecho adicional?

Answer 1

Si bien la solución de Vincicat (anteriormente aceptada con la recompensa) parecía funcionar al principio, reveló otro defecto de renderizado en el navegador Webkit. En 2 de cada 10 renovaciones de 10 páginas, la entrada se renderizó con ancho cero, cuando se puso en un <td> y diseñado con width: 100%...

Aquí se encontró una mejor solución (para mi caso de uso):

¿Deshabilitar los botones de giro de WebKit en el tipo de entrada = "número"?

Consiste en estos estilos CSS:

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

Interesante adición: He encontrado el <input type="number"/> Field muy mal en los navegadores WebKit de BlackBerry. Parece ser la fuente de los bloqueos del navegador. Dicho esto, ya no estamos usando esa función HTML 5 más ...

Answer 2

En realidad, el interrogador mismo está muy cerca de la respuesta, ya que sabe que es culpa del spinner, y afortunadamente WebKit permite a los usuarios controlarla por CSS:

input[type="number"]::-webkit-outer-spin-button { display: none; }

Fuente: Eliminar el control de giro en el tipo de entrada = número en WebKit

Demo en vivo: http://jsbin.com/aviram/5/

Espero que ayude.

Answer 3

No estoy seguro si esto ayuda, pero intente agregar estas líneas al input CSS

-webkit-box-sizing: border-box;
box-sizing: border-box;

Answer 4

No tengo acceso a los dispositivos iOS más antiguos para probarlo, pero esto funciona en iOS modernos y al mismo tiempo que Google Chrome ha comenzado a desobedecer el ancho: también, así que esto soluciona ambos:

input[type=number] {
  max-inline-size: none; /* chrome 71 */
  max-width: unset; min-width: unset; /* iOS12 */
}