Une case à cocher est un élément HTML qui permet à l’utilisateur de styliser une case à cocher avec CSS. Les pseudo-éléments tels que :before,:after, hover et:checked peuvent être utilisés pour modifier l’apparence d’une case à cocher. Pour modifier l’apparence de la case à cocher, l’utilisateur doit d’abord masquer la case à cocher par défaut. Cela se fait en définissant la propriété de visibilité sur”caché”.
Pour s’assurer que l’utilisateur a une bonne expérience visuelle, il est important que les concepteurs et les développeurs Web utilisent beaucoup les fonctionnalités de style CSS. Les cases à cocher peuvent également être stylées pour les rendre plus belles, tout comme les autres éléments HTML. Stylez une case à cocher avec CSS.
Les cases à cocher ne peuvent pas utiliser les propriétés CSS comme la couleur, la police, la bordure, la largeur et la hauteur. Dans cet article, nous parlerons des propriétés CSS que vous pouvez utiliser pour modifier les cases à cocher et de la manière dont elles peuvent améliorer votre UI/UX.
Comment styliser une case à cocher avec CSS
Créez du HTML
Utilisez un élément
Ajouter CSS
Masquez les cases à cocher en définissant la propriété de visibilité sur sa valeur « hidden ». Utilisez la pseudo-classe:checked, qui aide à voir quand la case est cochée. Donnez un style à l’étiquette avec les propriétés width, height, background, margin et border-radius. Réglez la position sur”relative”. Donnez du style à la classe”checkbox-example”en définissant l’affichage sur”block”et en spécifiant les propriétés de largeur et de hauteur. Ensuite, spécifiez le border-radius, la transition, la position et d’autres propriétés. Maintenant, le curseur est en position non cochée. Pour déplacer le bouton du curseur, nous devons savoir si la case est cochée. Lorsqu’elle est cochée, nous devons modifier la propriété left de l’élément label. Nous utilisons le combinateur + pour sélectionner le label frère, juste à côté.
FAQ
Comment cocher une case avec CSS ?
Le sélecteur de pseudo-classe CSS :checked représente n’importe quel élément radio ( ), case à cocher ( ) ou option ( dans un ) élément qui est cochée ou basculée vers un état activé.
Comment appliquer le CSS sur l’entrée de la case à cocher ?
ajoutez simplement le class=”checkbox”à vos cases à cocher. Créez ensuite ce style dans votre code CSS. Vous aurez toujours besoin d’ajouter la classe pour qu’elle fonctionne dans IE, et elle ne fonctionnera pas dans d’autres navigateurs non-IE qui ne prennent pas en charge IE.
Comment aligner une case à cocher en HTML CSS ?
Définissez la propriété vertical-align sur”bottom”, ce qui est cohérent d’un navigateur à l’autre. Définissez la propriété position sur”relative”pour placer l’élément par rapport à sa position normale.
Pouvez-vous styliser les boîtes d’alerte en CSS ?
La boîte d’alerte standard en JavaScript ne fournit pas l’option d’appliquer le CSS. Pour styliser votre boîte d’alerte, vous devez d’abord en créer une personnalisée. La boîte d’alerte personnalisée sera créée à l’aide de jQuery et les styles seront appliqués au CSS.
By Kaitlynn Clay
Je travaille en tant qu'expert UX. Je m'intéresse à la conception de sites Web et à l'analyse du comportement des utilisateurs. Pendant mes jours de congé, je visite toujours le musée d'art.