Case à cocher personnalisée
index.html
et style.css
ont déjà été fournis dans la machine virtuelle (VM).
Pour créer une case à cocher stylisée avec une animation lors du changement d'état :
- Créez un symbole de coché sous forme d'élément
<svg>
avec un élément <symbol>
à l'intérieur. Utilisez l'élément <use>
pour l'insérer comme icône SVG réutilisable.
- Créez un div conteneur avec une classe
.checkbox-container
. Utilisez la disposition en colonnes ou en lignes (flexbox) pour créer la disposition appropriée des cases à cocher.
- Cachez l'élément
<input>
et associez-lui une étiquette pour afficher une case à cocher et le texte fourni.
- Pour animer le symbole de coché lors du changement d'état, utilisez
stroke-dashoffset
.
- Pour créer un effet d'animation de zoom, utilisez
transform: scale(0.9)
via une animation CSS.
HTML :
<svg class="checkbox-symbol">
<symbol id="check" viewbox="0 0 12 10">
<polyline
points="1.5 6 4.5 9 10.5 1"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
></polyline>
</symbol>
</svg>
<div class="checkbox-container">
<input class="checkbox-input" id="apples" type="checkbox" />
<label class="checkbox" for="apples">
<span>
<svg width="12px" height="10px">
<use xlink:href="#check"></use>
</svg>
</span>
<span>Pommes</span>
</label>
<input class="checkbox-input" id="oranges" type="checkbox" />
<label class="checkbox" for="oranges">
<span>
<svg width="12px" height="10px">
<use xlink:href="#check"></use>
</svg>
</span>
<span>Oranges</span>
</label>
</div>
CSS :
.checkbox-symbol {
position: absolute;
width: 0;
height: 0;
pointer-events: none;
user-select: none;
}
.checkbox-container {
box-sizing: border-box;
background: #ffffff;
color: #222;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
}
.checkbox-container * {
box-sizing: border-box;
}
.checkbox-input {
position: absolute;
visibility: hidden;
}
.checkbox {
user-select: none;
cursor: pointer;
padding: 6px 8px;
border-radius: 6px;
overflow: hidden;
transition: all 0.3s ease;
display: flex;
}
.checkbox:not(:last-child) {
margin-right: 6px;
}
.checkbox:hover {
background: rgba(0, 119, 255, 0.06);
}
.checkbox span {
vertical-align: middle;
transform: translate3d(0, 0, 0);
}
.checkbox span:first-child {
position: relative;
flex: 0 0 18px;
width: 18px;
height: 18px;
border-radius: 4px;
transform: scale(1);
border: 1px solid #cccfdb;
transition: all 0.3s ease;
}
.checkbox span:first-child svg {
position: absolute;
top: 3px;
left: 2px;
fill: none;
stroke: #fff;
stroke-dasharray: 16px;
stroke-dashoffset: 16px;
transition: all 0.3s ease;
transform: translate3d(0, 0, 0);
}
.checkbox span:last-child {
padding-left: 8px;
line-height: 18px;
}
.checkbox:hover span:first-child {
border-color: #0077ff;
}
.checkbox-input:checked + .checkbox span:first-child {
background: #0077ff;
border-color: #0077ff;
animation: zoom-in-out 0.3s ease;
}
.checkbox-input:checked + .checkbox span:first-child svg {
stroke-dashoffset: 0;
}
@keyframes zoom-in-out {
50% {
transform: scale(0.9);
}
}
Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.