Informationen zur Einstellung des CheckBox-Auswahlstils in HTML

Beispielsweise ist die Auswahl im Take-out-Servicebereich eine Mehrfachauswahl und das Kontrollkästchen im Kontrollkästchenstil ist im Allgemeinen ausgeblendet. Nur die Beschriftungsschriftart und der äußere Rand der Einstellungen bleiben zur Steuerung des Auswahlstils übrig, um die Benutzererfahrung zu verbessern.

Zu diesem Zeitpunkt muss das Kontrollkästchen verarbeitet werden

Eine Methode, die ich zusammengefasst habe, besteht darin, es entsprechend dem Kontrollkästchen festzulegen

Beispiel:

<p>
      <input name="area" type="checkbox" value="1" id="check1"/>
       <label for="check1">桥西区</label>
 </p>

Hier schreibe ich das Kontrollkästchen und die Beschriftung in den p-Tag, damit Text durch Anklicken ausgewählt werden kann.

Stilkontrolle nach der Auswahl:

/*选矿*/
        .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;
        }

Die Zusammenfassung ist, dass ich den Stil durch

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

kontrolliere,

Allgemeine Bereichsauswahl vornehmen werde Der Kontrollkästchenstil wird ausgeblendet, sodass nur das Schriftartfeld übrig bleibt, dessen Farbe sich nach dem Klicken ändert, um die Benutzererfahrung zu verbessern.

Erweiterung:

Beim Erstellen einer Webseite gibt es normalerweise eine Anforderung: Klicken Sie auf ein Teil von Textinformationen und wählen Sie gleichzeitig ein Kontrollkästchen aus

Die alte Methode besteht darin, diesem Text ein Klickereignis hinzuzufügen, um die Auswahl des Kontrollkästchens auszulösen

//jq中：
//选中$("#ID").attr("checked","checked");//不选中$("#ID").removeAttr("checked");
//js中： var boxes = document.getElementsByName("test"); boxes[i].checked = true;

Hier ist eine praktische Methode:

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

Fügen Sie Eingabe und Beschriftung in dasselbe Etikett ein, und der Wert des for-Attributs der Beschriftung entspricht dem Wert des id-Attributs der Eingabe. Sie können auf die Beschriftung klicken und gleichzeitig die Eingabe steuern Zeit

Das obige ist der detaillierte Inhalt vonInformationen zur Einstellung des CheckBox-Auswahlstils in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!