javascript - tag - ¿Puedo ocultar el cuadro de número de entrada del número HTML5?

title html w3schools

Question

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

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

Answer 1

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 añadir a la respuesta existente ...

Firefox:

En las versiones actuales de Firefox, el valor predeterminado (agente de usuario) de la -moz-appearance en estos elementos es number-input . Cambiar eso al campo de texto de valor textfield efectivamente el spinner.

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

En algunos casos, es posible que desee que la rueda giratoria se oculte inicialmente y luego aparezca en posición / enfoque. (Este es actualmente el comportamiento predeterminado en Chrome). Si es así, puedes 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) de la propiedad -webkit-appearance en estos elementos ya es campo de textfield . Para eliminar el spinner, el -webkit-appearance propiedad -webkit-appearance debe cambiarse a none en ::-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 el margin: 0 se utiliza para eliminar el margen en versiones anteriores de Chrome.

Actualmente, al momento de escribir esto, aquí está el estilo de agente de usuario predeterminado en la pseudo clase de ''botón interno'':

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

Answer 2

De acuerdo con la 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á.

Answer 3

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 llevaria a

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

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

Answer 4

Esta es una mejor respuesta que me gustaría sugerir con el mouse sobre y sin el mouse sobre

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

Answer 5

Este CSS oculta efectivamente el botón de giro para los navegadores webkit (lo han probado en Chrome 7.0.517.44 y Safari Versión 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 para Firefox) para buscar propiedades CSS coincidentes para los elementos que le interesan, buscar Pseudo elementos. Esta imagen muestra los resultados para un tipo de elemento de entrada = "número":

Answer 6

Firefox 29 actualmente agrega soporte para elementos numéricos, así que aquí hay un fragmento para ocultar los giradores 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">

Answer 7

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

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

Primero, debe activar la función shadow-root de Chrome mediante "DevTools -> Configuración -> General -> Elementos -> Mostrar agente de usuario shadow DOM"

Luego puede ver todos los 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>

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

Answer 8

Intente usar input type="tel" lugar. Abre un teclado con números y no muestra cuadros de giro. No requiere JavaScript o CSS o complementos o cualquier otra cosa.

Answer 9

No es lo que pediste, pero lo hago debido a un error de enfoque en WebKit con spinboxes:

// 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";
}

Podría darle una idea para ayudarlo con lo que necesita.

Answer 10

Para hacer que esto funcione en Safari, creo que agregar! Importante para el ajuste del webkit obliga a ocultar el botón de giro.

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

Todavía estoy teniendo problemas para encontrar una solución para Opera también.

Answer 11

Tal vez cambie la entrada del número con javascript a la entrada de texto cuando no quiera un girador;

document.getElementById(''myinput'').type = ''text'';

y detener al usuario introduciendo texto;

 document.getElementById(''myinput'').onkeydown = function(e) {
if(!((e.keyCode > 95 && e.keyCode < 106)
|| (e.keyCode > 47 && e.keyCode < 58)
|| e.keyCode == 8
|| e.keyCode == 9)) {
return false;
}
}

luego haga que el javascript lo vuelva a cambiar en caso de que quiera un girador;

document.getElementById(''myinput'').type = ''number'';

funcionó bien para mis propósitos

Answer 12

Solo agregue este css para eliminar el spinner en la entrada del número

/* For Firefox */
input[type=''number''] {
-moz-appearance:textfield;
}
/* Webkit browsers like Safari and Chrome */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}

Answer 13

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

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