Heim > Web-Frontend > HTML-Tutorial > Informationen zur Einstellung des CheckBox-Auswahlstils in HTML

Informationen zur Einstellung des CheckBox-Auswahlstils in HTML

黄舟
Freigeben: 2017-10-30 10:24:59
Original
5250 Leute haben es durchsucht

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>
Nach dem Login kopieren

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;
        }
Nach dem Login kopieren

Die Zusammenfassung ist, dass ich den Stil durch

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

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;
Nach dem Login kopieren

Hier ist eine praktische Methode:

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

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage