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 :

Code principal html

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

Code CSS, utilise ici principalement un span de nœud enfant pour correspondre à l'entrée : sélecteur de frère vérifié pour modifier le style

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

reset-checkbox

Le principe de reset-checkbox est le même et je ne le répéterai pas ici.

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 :

À 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!