Modifier les custom forms avec Bootstrap 4

Bootstrap 4 apporte beaucoup plus de simplicité pour permettre aux utilisateurs de customiser à souhait les éléments forms de type select, upload de fichier ou encore bouton radios. Revue des éléments À l’exception de l’upload de fichier, les éléments « custom » utilisent une classe « c-* » afin de les différencier des basiques. Lorsque l’on regarde de plus […]

Posté le par Benoît Philibert|2483 vues

Bootstrap 4 apporte beaucoup plus de simplicité pour permettre aux utilisateurs de customiser à souhait les éléments forms de type select, upload de fichier ou encore bouton radios.

Revue des éléments

À l’exception de l’upload de fichier, les éléments « custom » utilisent une classe « c-* » afin de les différencier des basiques. Lorsque l’on regarde de plus prêt ces derniers, il existe une page custom-forms.scss dans le dossier scss/_custom-forms.scss de Bootstrap 4 qui recense l’ensemble des éléments.
 

Checkboxes

<label class="c-input c-checkbox">
<input type="checkbox">
<span class="c-indicator"></span>
Check this custom checkbox
</label>

Bouton radio

<label class="c-input c-radio">
<input id="radio1" name="radio" type="radio">
<span class="c-indicator"></span>
Toggle this custom radio
</label>

Menu select

<select class="c-select">
<option selected="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

Upload

<label class="file">
<input type="file" id="file">
<span class="file-custom"></span>
</label>

 

Changer l’apparence d’une Checkbox

De base la structure de l’élément Checkbox ressemble à cela :

<label class="c-input c-checkbox">
<input type="checkbox">
<span class="c-indicator"></span>
Check this custom checkbox
</label>

On s’aperçoit que l’élément est englobé par un label de classes c-input et c-checkbox. Le premier sert à définir un élément customisé, le second à définir le type d’élément customisé.

À l’intérieur, on retrouve l’input de type="checkbox" ainsi qu’une span de classe c-indicator représentant graphiquement l’élément cliquable.

 

Custom-forms.css

À présent, afin de customiser l’élément checkbox, nous devons modifier le fichier custom-forms.scss dans le dossier source scss de Bootstrap.

// Custom indicator
//
// Generates a shadow element to create our makeshift checkbox/radio background.

.c-indicator {
position: absolute;
top: 0;
left: 0;
display: block;
width: 1rem;
height: 1rem;
font-size: 65%;
line-height: 1rem;
color: #eee;
text-align: center;
user-select: none;
background-color: #eee;
background-repeat: no-repeat;
background-position: center center;
background-size: 50% 50%;
@include box-shadow(inset 0 .125rem .125rem rgba(0,0,0,.1));
}

// Checkboxes
//
// Tweak just a few things for checkboxes.

.c-checkbox {
.c-indicator {
border-radius: .25rem;
}

input:checked ~ .c-indicator {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=);
}

input:indeterminate ~ .c-indicator {
background-color: #0074d9;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDN2Mmg4VjNIMHoiLz4NCjwvc3ZnPg0K);
@include box-shadow(none);
}
}

  

Modifier la couleur de fond et ajouter une bordure

Au niveau de la classe c-indicator nous allons remplacer le background-color par la couleur de votre choix. Pour l’exemple j’ai choisis un violet moche (lol) avec une opacité de 50%.

/* background-color: #eee; */
background-color: rgba(101,95,214,.5);

Par la suite on rajoute toujours dans c-indicator une bordure qui à l’état « non sélectionné » sera invisible. Cette dernière sera de la même couleur que notre joyeux violet moche :

border: 1px solid rgba(101,95,214,0);

Passons à l’état « sélectionné » un tout petit peu plus bas dans le code SCSS. L’état « sélectionné » se caractérise par input:checked ~ .c-indicator dans le code SCSS. Si vous n’êtes pas familier avec le « nesting » (la syntaxe SCSS) je vous invite à aller voir ça de plus prêt sur le site officiel de SASS

.c-checkbox {
.c-indicator {
border-radius: .15rem;
}

input:checked ~ .c-indicator {
background-color: rgba(101,95,214,.6);
border: 1px solid rgba(101,95,214,1);

/* le reste n'est pas copié volontairement mais il faut bien le mettre hein ! */
}

Ici nous venons de rajouter une couleur de fond violette à 60% d’opacité ainsi que notre bordure violette à 100% d’opacité

Faîtes le test !

Par ici la démo de la customisation


Ces articles pourraient vous intéresser

Tags

Commenter
Votre adresse email ne sera pas publiée. Champs obligatoire *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.