HTML+CSS pour créer de superbes boutons radio et cases à cocher

Les boutons radio et les cases à cocher sont des fonctions requises par le front-end. Cet article présente principalement HTML+CSS pour obtenir de beaux styles de boutons radio et de cases à cocher. Les amis dans le besoin pourront s'y référer. un design plus beau. Boutons radio et cases à cocher stylisés.

1. Image de fond

html

<p class="check-wrappers">
    <span class="c-checkbox checked">
        <input type="radio" autocomplete="off" name="type" style="display:none;" value="1" checked="checked">
    </span>
    <span></span>
</p>

css

.cart-checkbox.checked {
    background-position: -29px 0;
}
.c-checkbox {
    display: block;
    width: 25px;
    height: 25px;
    margin: 0 auto;
    background: url(/shop-cart.png) no-repeat 0 0;
    background-size: 60px 120px;
}

Est-ce que tout le monde l'a appris ? Dépêchez-vous et essayez-le.

Recommandations associées :

Exemples détaillés d'utilisation de CSS pour implémenter des boutons radio et des cases à cocher

js et jquery respectivement Valider boutons radio, cases à cocher, boîtes déroulantes_compétences javascript

Code CSS pur pour embellir la case à cocher, bouton radio radios et méthode simple du bouton coulissant

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!