Pregunta ¿Puedo ocultar el cuadro de giro de la entrada del número HTML5?


¿Existe una forma consistente en los navegadores para ocultar los nuevos cuadros de giro que algunos navegadores (como Chrome) representan para la entrada HTML de tipo número? Estoy buscando un método CSS o JavaScript para evitar que aparezcan las flechas arriba / abajo.

<input id="test" type="number">

714
2017-09-24 20:58


origen


Respuestas:


Este CSS oculta efectivamente el botón giratorio para navegadores webkit (lo han probado en Chrome 7.0.517.44 y Safari Version 5.0.2 (6533.18.5)):

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

Siempre puede usar el inspector (webkit, posiblemente Firebug for Firefox) para buscar propiedades CSS coincidentes para los elementos que le interesan, busque Pseudoelementos. Esta imagen muestra resultados para un tipo de elemento de entrada = "número":

Inspector for input type=number (Chrome)


800
2017-11-28 18:17



Firefox 29 actualmente agrega soporte para elementos numéricos, así que aquí hay un fragmento para ocultar los spinners en los navegadores basados ​​en webkit y moz:

input[type='number'] {
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
<input id="test" type="number">


347
2018-03-21 12:45



Respuesta corta:

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}
<input type="number" />

Respuesta más larga:

Para agregar a la respuesta existente ...

Firefox:

En las versiones actuales de Firefox, el valor predeterminado (agente de usuario) del -moz-appearance propiedad en estos elementos es number-input. Cambiando eso al valor textfield efectivamente elimina el spinner.

input[type="number"] {
    -moz-appearance: textfield;
}

En algunos casos, es posible que desee ocultar la ruleta inicialmente, y luego aparece en el vuelo / foco. (Este es actualmente el comportamiento predeterminado en Chrome). Si es así, puede usar lo siguiente:

input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input;
}
<input type="number"/>


Cromo:

En las versiones actuales de Chrome, el valor predeterminado (agente de usuario) del -webkit-appearance propiedad en estos elementos ya está textfield. Para quitar el spinner, el -webkit-appearance El valor de la propiedad necesita ser cambiado a none sobre el ::-webkit-outer-spin-button/::-webkit-inner-spin-button pseudo clases (es -webkit-appearance: inner-spin-button por defecto).

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

Vale la pena señalar que margin: 0 se utiliza para eliminar el margen en mayor versiones de Chrome.

Actualmente, al escribir esto, aquí está el estilo del agente de usuario predeterminado en la pseudoclase 'inner-spin-button':

input::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button;
    display: inline-block;
    cursor: default;
    flex: 0 0 auto;
    align-self: stretch;
    -webkit-user-select: none;
    opacity: 0;
    pointer-events: none;
    -webkit-user-modify: read-only;
}

289
2018-01-14 03:34



De acuerdo a Guía de codificación de la experiencia del usuario de Apple para Safari móvil, puede usar lo siguiente para mostrar un teclado numérico en el navegador del iPhone:

<input type="text" pattern="[0-9]*" />

UN pattern de \d* también funcionará


118
2018-02-03 03:43



Intenta usar input type="tel" en lugar. Aparece un teclado con números, y no muestra cuadros de giro. No requiere JavaScript o CSS o complementos ni nada más.


38
2018-03-07 22:52



He encontrado este problema con un input[type="datetime-local"], que es similar a este problema.

Y he encontrado una manera de superar este tipo de problemas.

En primer lugar, debe activar la función shadow-root de Chrome mediante "DevTools -> Configuración -> General -> Elementos -> Mostrar user agent shadow DOM".

Entonces puedes ver todo elementos DOM sombreados, por ejemplo, para <input type="number">, el elemento completo con DOM sombreado es:

<input type="number">
  <div id="text-field-container" pseudo="-webkit-textfield-decoration-container">
    <div id="editing-view-port">
      <div id="inner-editor"></div>
    </div>
    <div pseudo="-webkit-inner-spin-button" id="spin"></div>
  </div>
</input>

shadow DOM of input[type="number"

Y de acuerdo con esta información, puede redactar algunos CSS para ocultar elementos no deseados, tal como dijo @Josh.


7
2017-12-30 11:30



input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
<input id="test" type="number">


4
2018-02-17 08:41



No es lo que pediste, pero hago esto debido a un error de foco en WebKit con cajas giratorias:

// temporary fix for focus bug with webkit input type=number ui
if (navigator.userAgent.indexOf("AppleWebKit") > -1 && navigator.userAgent.indexOf("Mobile") == -1)
{
    var els = document.querySelectorAll("input[type=number]");
    for (var el in els)
        el.type = "text";
}

Puede darte una idea para ayudarte con lo que necesitas.


3
2017-10-08 11:10



En Firefox para Ubuntu, simplemente usando

    input[type='number'] {
    -moz-appearance:textfield;
}

hizo el truco para mí

Añadiendo

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

Me llevaría a

Pseudo-clase desconocida o pseudo-elemento '-webkit-outer-spin-button'.   Conjunto de reglas ignorado debido al mal selector.

cada vez que lo intento Lo mismo para el botón de giro interno.


2
2017-11-18 21:16



Esta es una mejor respuesta que me gustaría sugerir al pasar el mouse sobre el mouse sin pasarlo

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

2
2017-09-22 09:20