En este artículo, veremos cómo ocultar el cuadro de número de entrada de números en HTML5. El Spinbox o Spinner en HTML permite aumentar o disminuir el número de entrada con la ayuda de flecha arriba y flecha abajo, colocadas dentro del cuadro, cuyo valor se define en un rango de números reales. El cuadro giratorio facilita la selección o el ingreso de una amplia gama de números reales, que se utiliza principalmente para insertar el número en HTML. Generalmente aparece cuando el valor del tipo <input> se selecciona como número, teléfono y otros casos similares. Hay varias propiedades y extensiones de CSS que se pueden implementar para ocultar el cuadro de número de entrada, que se analiza a continuación:
- ::-webkit-inner-spin-button: es un pseudoelemento CSS que se implementa en el botón giratorio del elemento <input> del selector de números, para agregar las propiedades de estilo a la parte interna.
- ::-webkit-outer-spin-button: Es un pseudo-elemento CSS que se utiliza para implementar la parte exterior del botón giratorio.
Acercarse:
- Para navegadores webkit (Chrome y Safari): en estos navegadores, el valor predeterminado de la propiedad -webkit-appearance es textfield . Para eliminar el cuadro de número de entrada, la propiedad -webkit-appearance en las pseudoclases ::-webkit-outer-spin-button,
::-webkit-inner-spin-button debe establecerse en none , que es inner-spin-button por defecto. - Para navegadores moz (Firefox): en estos navegadores, el valor predeterminado de la propiedad -moz-appearance es número de entrada, y para eliminar el cuadro de número de entrada, debe establecerlo en campo de texto.
Ejemplo: El código de ejemplo demuestra cómo practicar las propiedades anteriores y eliminar el cuadro de número de entrada de número de HTML5.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
/* For Chrome and Safari */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button
{
-webkit-appearance: none;
margin: 0;
}
/* For Firefox */
input[type="number"] {
-moz-appearance: textfield;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
HTML5 number input without a spin box.
</h3>
<input type="number" />
</center>
</body>
</html>
Salida: una entrada de número HTML5 sin su cuadro de número predeterminado.
Publicación traducida automáticamente
Artículo escrito por chiragchouhan163 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA