Comment utiliser du CSS3 pur pour embellir le partage d'exemples de code de bouton radio

Cette méthode CSS3 pure d'embellissement des boutons radio convient aux situations suivantes :

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

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

3. Aucun JS n'est requis pour prendre en charge les effets de commutation

L'image suivante est le rendu final :

Code HTML :

<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;
}

Le plus important de cette méthode est le nom de classe de l'effet sélectionné : .radio input:checked + span.radio-on

+ est une pseudo-classe de CSS2, sa signification est : p+p sélectionne l'élément immédiatement après les éléments

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é.

J'ai donc ajouté une travée avec le nom de classe radio-bg à l'étiquette pour créer spécifiquement le grand cercle à l'arrière, puis j'ai utilisé une travée avec le nom de classe radio-on pour créer le petit cercle sélectionné dans l'avant.

De cette façon, le texte dans l'étiquette cliquée est conservé et l'effet de la sélection radio peut également être modifié.

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!