Utilisez CSS pour personnaliser le style du bouton de case à cocher vert

Cet article présente principalement le style du bouton de case à cocher vert personnalisé CSS, qui a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Le propre complexe HTML La boîte de sélection ou la radio. Les styles de boutons sont relativement simples. Parfois, ces contrôles de formulaire doivent correspondre à leurs propres styles de thème. Ils ont peut-être été implémentés dans le passé avec l'aide de JS. Maintenant, CSS peut également être entièrement implémenté. nous voulons.

Rendu :

Passons directement au sujet La première chose qui nous vient à l'esprit est que la case à cocher a besoin d'une couleur de fond, Ensuite, il y a une case à cocher pour l'état sélectionné. Nous utilisons ici "coche" pour représenter l'état sélectionné. HTML peut simplement représenter

<p class="i-check">
       <input type="checkbox" value="0" />
       <label></label>
</p>

.i-check dans son ensemble. aussi simple

.i-check {   
    width: 20px;   
    height: 20px;   
    position: relative;   
    margin: 20px auto;   
}

La taille de la case à cocher est déterminée en fonction de vos propres besoins. La marge est définie ici pour l'afficher au milieu du navigateur
Ensuite, la case à cocher est définie L'état par défaut. est défini ici à l'aide de label. Sa hauteur et sa largeur sont les mêmes que celles du paramètre .i-check. Ensuite, donnez-lui une couleur d'arrière-plan et définissez sa position

.i-check label {   
   width: 20px;   
   height: 20px;   
   cursor: pointer;   
   position: absolute;   
   top: 0;   
   left: 0;   
   background: #1A9909;   
   border-radius: 4px;

Nous avons déjà corrigé l'état par défaut. continuez l'analyse. Ce dont nous avons besoin à ce stade est un état sélectionné. L'état sélectionné est représenté par une coche comme mentionné ici, nous utilisons la pseudo-classe après pour le définir, définir sa bordure et faire pivoter l'après. devient Coche. Mais la coche d'état par défaut est masquée, nous avons donc utilisé une opacité de 0.

.i-check  label:after {   
    content: '';   
    width: 9px;   
    height: 5px;   
    position: absolute;   
    top: 4px;   
    left: 4px;   
    border: 3px solid #fff;   
    border-top: none;   
    border-right: none;   
    background: transparent;   
    opacity: 0;   
    transform: rotate(-45deg);   
}

D'accord, l'état entier est défini. Nous devons maintenant faire apparaître la coche lors de la coche. est cliqué. Le code suivant peut être complété

.i-check input[type=checkbox]:checked + label:after {   
    opacity: 1;   
}

Écrit ici, n'oubliez pas de laisser la case à cocher Entrée définir son style afin de permettre aux utilisateurs de cliquer dessus, sa hauteur et sa hauteur. la largeur doit être cohérente avec la même taille globale et la placer en haut de la zone entière. De cette façon, l'utilisateur peut cliquer n'importe où dans cette zone. La dernière étape consiste à masquer la case à cocher, à la masquer et non. cachez-le vraiment et supprimez-le. Dans ce cas, il n'y aura pas d'effet de clic. Ce qu'il faut masquer ici, c'est utiliser l'opacité pour le définir sur 0.

.i-check input[type=checkbox] {   
    opacity: 0;   
    position: absolute;   
    z-index: 2;   
    left: 0;   
    top: 0;   
    width: 100%;   
    height: 100%;   
    margin: 0;   
}

D'accord, tout l'effet est terminé. De la même manière, vous pouvez également définir le bouton radio Effet.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Deux façons d'utiliser CSS pour implémenter du code qui ne modifie pas la taille de l'image d'arrière-plan lors du zoom du navigateur

Comment définir CSS Couleur de la police du texte

Comment résoudre le problème des lacunes sous les images CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!