Formulaires personnalisés Bootstrap4

Bootstrap4 vous permet de personnaliser certains styles de formulaire pour remplacer les styles par défaut du navigateur.

Case à cocher personnalisée

Pour personnaliser une case à cocher, vous pouvez définir<div>comme élément parent, avec la classe.custom-controlet.custom-checkbox, placez la case à cocher comme élément enfant à l'intérieur du<div>, puis définissez la case à cocher surtype="checkbox", avec la classe.custom-control-input。

Pour le texte de la case à cocher, utilisez la baliselabel, et le label utilise la classe.custom-control-label,labeldeforla valeur de l'attribut doit correspondre à l'id de la case à cocher.

Exemple Bootstrap4

<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">Case à cocher personnalisée</label> </div> </form>

Essayez-le vous-même »

Bouton radio personnalisé

Pour personnaliser un bouton radio, vous pouvez définir<div>comme élément parent, avec la classe.custom-controlet.custom-radio, placez le bouton radio comme élément enfant à l'intérieur du<div>, puis définissez le bouton radio surtype="radio", avec la classe.custom-control-input。

Pour le texte du bouton radio, utilisez la baliselabel, et le label utilise la classe.custom-control-label,labelde l'attributfor, la valeur doit correspondre à l'id du bouton radio。

Exemple Bootstrap4

<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">Bouton radio personnalisé</label> </div> </form>

Essayez-le vous-même »

Contrôles personnalisés affichés en ligne

Nous pouvons utiliser la classe.custom-control-inlinesur un élément extérieur pour envelopper les contrôles de formulaire personnalisés, afin que les contrôles de formulaire personnalisés puissent être affichés sur la même ligne :

Exemple Bootstrap4

<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">Bouton radio personnalisé 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">Bouton radio personnalisé 2</label> </div> </form>

Essayez-le vous-même »

Menu de sélection personnalisé

Pour créer un menu de sélection personnalisé, vous pouvez ajouter la<select>classe à l'.custom-selectélément :

Exemple Bootstrap4

<form> <select name="cars" class="custom-select-sm"> <option selected>Menu de sélection personnalisé</option> <option value="Google">Google</option> <option value="Exemple">Exemple</option> <option value="Taobao">Taobao</option> </select> </form>

Essayez-le vous-même »

Si nous voulons définir la taille du menu de sélection personnalisé, nous pouvons utiliser.custom-select-sm、.custom-select-lgpour définir leur taille :

Exemple Bootstrap4

<form> <!--small--> <select name="cars" class="custom-select-sm"> <option selected>Menu de sélection personnalisé plus petit</option> <option value="Google">Google</option> <option value="Exemple">Exemple</option> <option value="Taobao">Taobao</option> </select> <!--big--> <select name="cars" class="custom-select-lg"> <option selected>Menu de sélection personnalisé plus grand</option> <option value="Google">Google</option> <option value="Exemple">Exemple</option> <option value="Taobao">Taobao</option> </select> </form>

Essayez-le vous-même »

Contrôle de curseur personnalisé

Nous pouvons ajouter leinputesttype="range"classe dans l'input de.custom-rangetype pour définir un contrôle de curseur personnalisé :

Exemple Bootstrap4

<form> <label for="customRange">Contrôle de curseur personnalisé</label> <input type="range" class="custom-range" id="customRange" name="points1"> </form>

Essayez-le vous-même »

Contrôle de téléversement de fichier personnalisé

Nous pouvons ajouter la.custom-fileclasse à l'élément parent, et l'inputàtype="file"et ajoutez le.custom-file-input:

Pour le texte du contrôle de téléversement, utilisez la baliselabel, et le label utilise la classe.custom-file-label,labeldepourla valeur de l'attribut doit correspondre à l'id du contrôle de téléversement。

Exemple Bootstrap4

<form> <div class="custom-file"> <input type="file" class="custom-file-input" id="customFile"> <label class="custom-file-label" for="customFile">Choisir un fichier</label> </div> </form>

Essayez-le vous-même »
Autres extensions