Cómo eliminar las flechas en el campo de números

¿Te interesa eliminar las flechas predeterminadas que aparecen en el campo de Números en WPForms? Es común que navegadores como Chrome, Safari y Firefox apliquen su propio estilo predeterminado a los campos de formulario, incluida la visualización de flechas en los campos de Números. Si deseas eliminar estas flechas, podemos guiarte en el proceso.

Con un poco de CSS, puedes alterar sin esfuerzo la apariencia del campo del formulario. En este tutorial, te proporcionaremos el CSS necesario para eliminar las flechas del campo.

Eliminar las flechas del campo de números

Para eliminar este estilo, vamos a necesitar copiar y pegar el CSS personalizado en nuestro sitio.

Si necesitas ayuda sobre cómo y dónde añadir tu CSS personalizado, por favor revisa este tutorial.

Para un formulario específico

Este CSS solo se aplicará a los campos de formulario de Número en el ID de formulario específico 612. Necesitarás actualizar este ID antes de usar este CSS.

Si necesitas ayuda sobre cómo encontrar el ID de tu formulario, por favor consulta este tutorial.

form#wpforms-form-612 input[type="number"]::-webkit-outer-spin-button, form#wpforms-form-612 input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
 
form#wpforms-form-612 input[type="number"] {
    -moz-appearance: textfield;
}

Para todos los formularios

Si solo quieres eliminar las flechas para todos tus formularios, usarías este CSS.

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

Este CSS no cambia la funcionalidad del campo del formulario. Solo se aceptan números dentro del campo de formulario de Números, pero después de añadir el CSS, ya no verás las flechas en el campo.

Y eso es todo lo que necesitas para eliminar las flechas de arriba y abajo en el campo de Números. ¿Te gustaría estilizar otros campos de formulario también? Consulta nuestro artículo sobre Cómo Añadir Estilo a Campos Basados en Texto.