Comment supprimer les flèches sur le champ Numéros

Souhaitez-vous supprimer les flèches par défaut qui apparaissent sur le champ Numéros dans WPForms ? Il est courant que les navigateurs comme Chrome, Safari et Firefox appliquent leur propre style par défaut aux champs de formulaire, y compris l'affichage de flèches sur les champs Numéros. Si vous souhaitez supprimer ces flèches, nous pouvons vous guider tout au long du processus.

Avec un peu de CSS, vous pouvez modifier sans effort l'apparence du champ de formulaire. Dans ce tutoriel, nous vous fournirons le CSS nécessaire pour éliminer les flèches du champ.

Supprimer les flèches sur le champ Numéros

Afin de supprimer ce style, nous allons devoir copier et coller le CSS personnalisé sur notre site.

Si vous avez besoin d'aide sur comment et où ajouter votre CSS personnalisé, veuillez consulter ce tutoriel.

Pour un formulaire spécifique

Ce CSS ne sera appliqué qu'aux champs de formulaire Numéro de l'ID de formulaire spécifique 612. Vous devrez mettre à jour cet ID avant d'utiliser ce CSS.

Si vous avez besoin d'aide pour trouver votre ID de formulaire, veuillez consulter ce tutoriel.

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

Pour tous les formulaires

Si vous souhaitez simplement supprimer les flèches pour tous vos formulaires, vous utiliseriez ce 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;
}

Ce CSS ne modifie pas la fonctionnalité du champ de formulaire. Seuls les nombres sont acceptés dans le champ de formulaire Numéros, mais après avoir ajouté le CSS, vous ne verrez plus les flèches sur le champ.

Et c'est tout ce dont vous avez besoin pour supprimer les flèches vers le haut et vers le bas sur le champ Numéros. Souhaitez-vous également styliser d'autres champs de formulaire ? Consultez notre article sur Comment ajouter du style aux champs textuels.