Explication détaillée de l'exemple de bouton radio d'embellissement CSS3

Cette méthode CSS3 pure pour embellir le bouton radio convient aux situations suivantes :

1 Elle est compatible avec IE9 et supérieur. Si vous devez être compatible avec IE8, vous devez écrire un. IE hack pour supprimer le style

2. Seule la radio du bouton radio est prise en charge, car le cercle dans le style de sélection du bouton radio peut être créé avec CSS, mais l'effet de sélection de la case à cocher du bouton radio nécessite une image ou bibliothèque de polices d'icônes

3. Non requis JS prend en charge les effets de commutation

<label for="man" class="radio">
    <span class="radio-bg"></span>
    <input type="radio" name="sex" id="man" value="男" checked="checked" /> 男
    <span class="radio-on"></span>
</label>
<label for="woman" class="radio">
    <span class="radio-bg"></span>
    <input type="radio" name="sex" id="woman" value="女" /> 女
    <span class="radio-on"></span>
</label>

Code CSS :

.radio{
    display: inline-block;
    position: relative;
    line-height: 18px;
    margin-right: 10px;
    cursor: pointer;
}
.radio input{
    display: none;
}
.radio .radio-bg{
    display: inline-block;
    height: 18px;
    width: 18px;
    margin-right: 5px;
    padding: 0;
    background-color: #45bcb8;
    border-radius: 100%;
    vertical-align: top;
    box-shadow: 0 1px 15px rgba(0, 0, 0, 0.1) inset, 0 1px 4px rgba(0, 0, 0, 0.1) inset, 1px -1px 2px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
}
.radio .radio-on{
    display: none;
}
.radio input:checked + span.radio-on{
    width: 10px;
    height: 10px;
    position: absolute;
    border-radius: 100%;
    background: #FFFFFF;
    top: 4px;
    left: 4px;
    box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.3), 0 0 1px rgba(255, 255, 255, 0.4) inset;
    background-image: linear-gradient(#ffffff 0, #e7e7e7 100%);
    transform: scale(0, 0);
    transition: all 0.2s ease;
    transform: scale(1, 1);
    display: inline-block;
}

La chose la plus importante dans cette méthode est le nom de la classe de l'effet sélectionné : .radio input:checked + span.radio-on

+ est une pseudo-classe de CSS2, et sa signification est : div+p sélectionne tous les éléments

div>

Autrement dit, recherchez l'entrée sélectionnée (:checked) et l'élément span avec le nom de la classe activé après cela créera un effet de cercle sélectionné.

Il existe de nombreuses façons d'embellir l'étiquette sur Internet en transformant l'étiquette en cercle, mais dans ce cas, le texte sélectionné doit être placé à l'extérieur de l'étiquette, ce qui provoque problèmes en cliquant sur le texte, l'effet radio ne peut pas être commuté.

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!