Explication détaillée de CSS modifiant le style de sélection unique et de sélection multiple d'entrée

Dans le développement de projets, nous rencontrons souvent des situations dans lesquelles nous devons modifier les styles d'entrée à sélection unique et à sélection multiple. Aujourd'hui, je vais vous présenter un moyen simple de modifier les styles d'entrée à sélection unique et à sélection multiple.

Avant cela, présentons brièvement la pseudo-classe :before

:before selector insère du contenu avant l'élément sélectionné. Utilisez l'attribut content pour spécifier le contenu à insérer (le contenu est obligatoire).

Je pense que ce n'est pas difficile à comprendre. Ensuite, comprenons d'abord l'idée :

(1) Utilisez d'abord label pour définir une marque pour l'élément d'entrée en HTML, cela. c'est-à-dire que lorsque vous cliquez sur l'étiquette label L'entrée correspondante sera également sélectionnée ou désélectionnée

(2) L'étape suivante consiste à écrire du CSS Pour masquer l'entrée, il vous suffit d'ajouter votre style avant l'étiquette. Cela peut être une image ou vous pouvez la dessiner vous-même. Le cercle ci-dessous est le cercle que j'ai écrit. Bien sûr, il peut également être remplacé par une image d'arrière-plan.

input[type="radio"]+label:before是未选中状态的样式

input[type="radio"]:checked+label:before是选中状态的样式

<input type="radio" id="nationality1"><label for="nationality1">中国</label></p>

input[type="radio"]{
    display:none;
}
input[type="radio"]+label{
    position: relative;
}
input[type="radio"]+label:before{
    content: "";
    width:25px;
    height:25px;
    background: #ffffff;
    border:2px solid $gray;
    position: absolute;
    bottom:3px;
    left: -35px;
    border-radius: 50%;
}                                                   
input[type="radio"]:checked+label:before{
    content: "";
    width: 25px;
    height: 25px;
    background: #34c0f5;
    position: absolute;
    bottom:3px;
    left: -35px;
    z-index: 99;
    border-radius: 50%;
}

Remplacez la radio par une case à cocher pour effectuer plusieurs sélections.

Remarque : le masquage et le positionnement des pseudo-classes sont essentiels

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!