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