Implémentation CSS des effets d'implémentation de la radio et des cases à cocher

Cet article présente principalement les informations pertinentes sur les exemples d'implémentation CSS pure des effets radio et des cases à cocher. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

radio-and-checkbox

CSS pur pour obtenir des effets radio et checkbox

reset-radio

Lors du développement de projets côté PC, des composants radio et cases à cocher sont souvent utilisés. Cependant, comme le style natif est relativement incompatible avec le style de conception du concepteur, nous pouvons souvent nous référer à des modules tiers pour l'implémenter, ou via JS Wait for. d'autres façons de pirater. Non seulement cela augmente relativement la quantité de code, mais c'est aussi très compliqué, nous avons donc cette implémentation CSS pure qui s'appuie sur input[radio] et input[checkbox] natifs. Le code principal est le suivant :

<p class="reset-radio">
    <input checked type="radio" id="age1" name="age">
    <span class="real-target"></span>
</p>

.reset-radio {
    display: inline-block;
    position: relative;
    width: 16px;
    height: 16px;
}

.reset-radio .real-target {
    z-index: 1;
    width: 100%;
    height: 100%;
    position: absolute;
    display: inline-block;
    background: #ffffff;
    border: 1px solid #dadde0;
    border-radius: 100%;
    top: 0;
    left: 0;
    bottom: 0;
}

.reset-radio input[type=radio] {
    cursor: pointer;
    z-index: 2;
    width: 16px;
    height: 16px;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    right: 0;
    bottom: 0;
}

.reset-radio input:checked+span {
    border-color: #48b4ec;
}

.reset-radio input:checked+span::before {
    content: '';
    position: absolute;
    background: #48b4ec;
    width: 6px;
    height: 6px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100%;
}

À propos de l'impact de la sélection des attributs CSS sur les performances de l'animation

Boîte de simulation CSS3 dans IE effet d'ombre

L'embellissement et la fonction du style de formulaire de case à cocher d'imitation div

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!