¿Está interesado en eliminar las teclas de flecha que aparecen por defecto en el campo Números en WPForms? Es común que navegadores como Chrome, Safari y Firefox apliquen su propio estilo predeterminado a los campos de formulario, incluyendo la visualización de las teclas de flecha en los campos Números. Si desea eliminar estas flechas, podemos guiarlo a través del proceso.
Con sólo 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 Números
Para eliminar este estilo, tendremos que copiar y pegar el CSS personalizado en nuestro sitio.
Si necesitas ayuda sobre cómo y dónde añadir tu CSS personalizado, revisa este tutorial.
Para un formulario específico
Este CSS sólo se aplicará a los campos de formulario Number en el ID de formulario específico 612. Tendrás que actualizar este ID antes de usar este CSS.
Si necesita ayuda para encontrar el ID de su formulario, consulte 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 todas las formas
Si sólo 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 de formulario. Solo se aceptan números dentro del campo de formulario 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 arriba y abajo del campo Números. ¿Desea aplicar estilo a otros campos de formulario? Echa un vistazo a nuestro artículo sobre Cómo añadir estilo a los campos basados en texto.