Bootstrap 4 formulaires personnalisés
Bootstrap 4 formulaires personnalisés
Bootstrap 4 est livré avec des éléments de formulaire personnalisés, destinés à remplacer les valeurs par défaut du navigateur :
Gamme personnalisée :
Plage par défaut :
Case à cocher personnalisée
Pour créer une case à cocher personnalisée, enveloppez un élément conteneur, comme <div>, avec une classe de .custom-controlet .custom-checkboxautour de la case à cocher. Ajoutez ensuite le .custom-control-inputà l'entrée avec type="checkbox".
Conseil : Si vous utilisez des étiquettes pour le texte d'accompagnement, ajoutez-y la .custom-control-labelclasse. Notez que la valeur de l'attribut for doit correspondre à l'id de la case à cocher :
Exemple
<form>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck"
name="example1">
<label class="custom-control-label" for="customCheck">Check this custom
checkbox</label>
</div>
</form>
Commutateur personnalisé
Pour créer un "interrupteur à bascule" personnalisé, enveloppez un élément conteneur, comme <div>, avec une classe de .custom-controlet .custom-switchautour d'une case à cocher. Ajoutez ensuite la .custom-control-inputclasse à la case à cocher :
Exemple
<form>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="switch1">
<label class="custom-control-label" for="switch1">Toggle me</label>
</div>
</form>
Boutons radio personnalisés
Pour créer un bouton radio personnalisé, enveloppez un élément conteneur, comme <div>, avec une classe de .custom-controlet .custom-radioautour du bouton radio. Ajoutez ensuite le .custom-control-inputà l'entrée avec type="radio".
Conseil : Si vous utilisez des étiquettes pour le texte d'accompagnement, ajoutez-y la .custom-control-labelclasse. Notez que la valeur de l'attribut for doit correspondre à l'id de la radio :
Exemple
<form>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customRadio"
name="example1" value="customEx">
<label
class="custom-control-label" for="customRadio">Custom radio</label>
</div>
</form>
Contrôles de formulaire personnalisés en ligne
Si vous souhaitez que les contrôles de formulaire personnalisés soient côte à côte (en ligne), ajoutez le .custom-control-inlineau wrapper/conteneur :
Exemple
<form>
<div class="custom-control custom-radio
custom-control-inline">
<input type="radio" class="custom-control-input" id="customRadio"
name="example" value="customEx">
<label
class="custom-control-label" for="customRadio">Custom radio
1</label>
</div>
<div class="custom-control custom-radio
custom-control-inline">
<input type="radio" class="custom-control-input" id="customRadio2"
name="example" value="customEx">
<label
class="custom-control-label" for="customRadio2">Custom radio
2</label>
</div>
</form>
Menu de sélection personnalisé
Pour créer un menu de sélection personnalisé, ajoutez la .custom-selectclasse à l'élément <select> :
Exemple
<form>
<select name="cars" class="custom-select">
<option selected>Custom Select Menu</option>
<option
value="volvo">Volvo</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
Taille du menu de sélection personnalisée
Utilisez la .custom-select-smclasse pour créer un petit menu de sélection et la .custom-select-lgclasse pour un grand :
Exemple
<form>
<!-- Small -->
<select name="cars" class="custom-select-sm">
<option selected>Small Custom Select Menu</option>
<option
value="volvo">Volvo</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<!-- Large -->
<select name="cars" class="custom-select-lg">
<option selected>Large Custom Select Menu</option>
<option
value="volvo">Volvo</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
Gamme personnalisée
Pour créer un menu de plage personnalisé, ajoutez la .custom-rangeclasse à une entrée avec type="<range>":
Exemple
<form>
<label for="customRange">Custom range</label>
<input type="range" class="custom-range" id="customRange" name="points1">
</form>
Téléchargement de fichier personnalisé
Pour créer un téléchargement de fichier personnalisé, enveloppez un élément de conteneur avec une classe .custom-fileautour de l'entrée avec type="file". Ajoutez-y ensuite le .custom-file-input.
Conseil : Si vous utilisez des étiquettes pour le texte d'accompagnement, ajoutez-y la .custom-file-labelclasse. Notez que la valeur de l'attribut for doit correspondre à l'id de la case à cocher :
Notez que vous devez également inclure du code jQuery si vous souhaitez que le nom du fichier apparaisse lorsque vous sélectionnez un fichier spécifique :
Exemple
<form>
<div class="custom-file">
<input
type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
</form>
<script>
// Add the following code if
you want the name of the file appear on select
$(".custom-file-input").on("change", function() {
var fileName =
$(this).val().split("\\").pop();
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>