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

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>

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

Le résumé est que j'utilise

 .select-ul li p input[type=checkbox]:checked + label{}

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;

Voici une méthode pratique :

<p>
   <input name="fittype" type="checkbox" value="8" id="checkin8"/>
   <label for="checkin8">其他</label></p>

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!