Maison > interface Web > tutoriel CSS > CSS pur pour obtenir un effet de sélection de boîte

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

王林
Libérer: 2020-11-09 15:41:17
avant
4957 Les gens l'ont consulté

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>
Copier après la connexion

Effet d'implémentation :

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

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!

Étiquettes associées:
css
source:csdn.net
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal