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