Maison > interface Web > tutoriel HTML > À propos du paramètre de style de sélection checkBox en HTML

À propos du paramètre de style de sélection checkBox en HTML

黄舟
Libérer: 2017-10-30 10:24:59
original
5250 Les gens l'ont consulté

Par exemple, dans la zone de service à emporter, la sélection est à sélection multiple et la case de style de case à cocher est généralement masquée. Seules la police de l'étiquette et la bordure extérieure du paramètre sont laissées au contrôle du style de sélection afin d'améliorer l'expérience utilisateur.

À ce stade, la case à cocher doit être traitée

Une méthode que j'ai résumée consiste à la définir en fonction de la case cochée

Exemple :

<p>
      <input name="area" type="checkbox" value="1" id="check1"/>
       <label for="check1">桥西区</label>
 </p>
Copier après la connexion

Ici, j'écris la case à cocher et l'étiquette dans la balise p, afin que le texte puisse être sélectionné en cliquant dessus.

Contrôle du style après sélection :

/*选矿*/
        .select-ul li p label,
        .type-list-ul li p label{
            font-size: 0.28rem;color: #666;
            width: 100%;height: 100%;display:  inline-block;
            border-color: #666;
            border-style: solid;
            border-width: 1px;
            border-radius: 0.1rem;
        }
        .type-list-ul li p label{width: auto;padding: 0 0.1rem;}
        .select-ul li p{
            height: 0.5rem;
            width: 1.5rem;
            display: inline-block;
            line-height: 0.5rem;
        }
        .type-list-ul li p{
            /*padding: 0 0.1rem;*/
            height: 0.5rem;
            /* width: 1.5rem; */
            display: inline-block;
            line-height: 0.5rem;
        }
        .select-ul li p input[type=checkbox]:checked + label,
        .type-list-ul p input[type=checkbox]:checked + label{
            border-color: #FA8072;
            color: #FA8072;
        }
Copier après la connexion

Le résumé est que j'utilise

 .select-ul li p input[type=checkbox]:checked + label{}
Copier après la connexion

pour contrôler le style

La sélection de la zone générale. faites en sorte que le style de case à cocher Masquer, ne laissant que la zone de police, qui change de couleur après avoir cliqué pour améliorer l'expérience utilisateur

Extension :

Lors de la création d'une page Web, il y a généralement une exigence : cliquer sur un morceau d'information textuel et cochez une case en même temps

L'ancienne méthode consiste à ajouter un événement de clic à ce texte pour déclencher la sélection de la case à cocher

//jq中:
//选中$("#ID").attr("checked","checked");//不选中$("#ID").removeAttr("checked");
//js中: var boxes = document.getElementsByName("test"); boxes[i].checked = true;
Copier après la connexion

Voici une méthode pratique :

<p>
   <input name="fittype" type="checkbox" value="8" id="checkin8"/>
   <label for="checkin8">其他</label></p>
Copier après la connexion

Mettez l'entrée et l'étiquette dans la même étiquette p et la valeur de l'attribut for de l'étiquette est égale à la valeur de l'attribut id de l'entrée. Vous pouvez cliquer sur l'étiquette et contrôler l'entrée au niveau de l'entrée. en même temps

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:
source:php.cn
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