CSS pur pour obtenir un effet de sélection de boîte

Introduction au sélecteur :

1. "+" : Par exemple, div + p sélectionne tous les éléments

2. :checked : Par exemple, input:checked indique l'état coché des boutons radio et des cases à cocher.

(Partage de vidéos d'apprentissage : tutoriel vidéo CSS)

Code d'implémentation :

<style type="text/css">
            .che-box {
            display:inline;
        }
        .che-box input{
            display: none;
        }
        .che-box label{
            display: inline-block;
            border: 1px solid #e1e1e1;
            border-radius: 4px;
            padding: 3px 5px;
        }
        .che-box input:checked + label{
            border-color: #088de8;
            background: #088de8;
            color: #fff;
        }
    </style>
 
 
<div class="che-box">
        <input type="checkbox" id="che1" />
        <label for="che1">
            标签1
        </label>
    </div>
    <div class="che-box">
        <input type="checkbox" id="che2" />
        <label for="che2">
            标签2
        </label>
    </div>

Effet d'implémentation :

Cette situation est principalement utilisée pour personnaliser le style de sélection de saisie avec type="checkbox, radio". Elle est souvent utilisée dans le travail réel, j'espère qu'elle sera utile à tout le monde.

Recommandations associées : Tutoriel CSS

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!