Erweitertes Kontrollkästchen-Styling mit CSS-Raster
Das CSS-Layout-Modul Ich kann nicht nur ein Mammut eines Layoutproblems lösen, sondern auch einige gute alte Mulchprobleme, die wir schon waren sich lange beschäftigen, sowie ein Kontrollkästchen beschriften.
Es gibt zwar eine relativ unkomplizierte Methode, um das Etikett zu formatieren, wenn es erscheint nach dem Das Kontrollkästchen ist nicht so einfach, wenn das Etikett angezeigt wird Vor es.
Checkbox-Stil ohne CSS-Raster
Beschriftung gestalten nach dem Ein Kontrollkästchen ist etwas, das wir Entwickler gemacht haben, seit wir irgendwo darüber gelesen haben. Diese Technik ist eines der besten und alten Beispiele für die mächtige Dynamik, die CSS besitzen kann.
Hier ist der Code, mit dem Sie vielleicht bereits vertraut sind gestaltet eine Beschriftung nach dem ein angekreuztes Kontrollkästchen:
Eingabe: geprüft + Beschriftung / * style me * /
EIN gestyltes Etikett nach dem ein Kontrollkästchen könnte so aussehen (Sie können jedoch auch andere Stilregeln verwenden):
Der obige CSS-Code verwendet die benachbarter Geschwisterkombinator markiert durch die + Schlüssel. Wenn ein Kontrollkästchen in der : geprüft Zustand, ein Element nach dem es (normalerweise ein Etikett) kann mit dieser Methode gestaltet werden.
Eine so einfache und effektive Technik! Was könnte möglicherweise falsch damit umgehen? Nichts, bis Sie das Etikett anzeigen möchten Vor das Kontrollkästchen.
Der benachbarte Geschwisterkombinator wählt das nächste Element aus; Das heißt, das Label muss kommen nach dem das Kontrollkästchen im HTML-Quellcode.
Also, um ein Label erscheinen zu lassen Vor Das zugehörige Kontrollkästchen auf dem Bildschirm kann nicht einfach vor dem Kontrollkästchen im Quellcode verschoben werden Der vorherige Geschwister-Selektor ist in CSS nicht vorhanden.
Was bleibt nur eine Möglichkeit: das Kontrollkästchen und das Etikett neu positionieren mit verwandeln oder Position oder Spanne oder eine andere CSS-Eigenschaft mit einer Art Telekinese-Funktion, sodass das Label links neben dem Kontrollkästchen auf dem Bildschirm angezeigt wird.
Probleme mit der traditionellen Methode
Da ist nichts hauptsächlich falsch mit der oben genannten Technik, aber es kann sein in bestimmten Fällen ineffizient. Ich meine Fälle, in denen die umgeordneten Positionen der Checkbox und des Labels nicht mehr funktionieren.
Denken Sie ansprechend, zum Beispiel. Möglicherweise müssen Sie die Größe des Kontrollkästchens entsprechend dem Gerät ändern, auf dem es angezeigt wird. Wenn das passiert, wirst du es tun müssen auch das Etikett neu positionieren, Es wird keine automatische Neuausrichtung des Labels als Reaktion auf die Neupositionierung / Größenänderung des Kontrollkästchens vorgenommen.
Wir können diesen Nachteil beseitigen, wenn wir nur könnten Stellen Sie festes Layout für das Kontrollkästchen und das Etikett bereit, anstatt sie auf der Seite grob zu positionieren.
Bei fast allen Layoutsystemen wie Tabellen oder Spalten ist dies jedoch erforderlich Fügen Sie das Label vor dem Kontrollkästchen im Quellcode hinzu um es auf die gleiche Weise auf dem Bildschirm erscheinen zu lassen. Das ist etwas, was wir nicht tun wollen, weil die nächste Elementauswahl auf dem Etikett nicht mehr funktioniert.
Das CSS-Grid dagegen ist ein Layoutsystem nicht abhängig von der Platzierung / Reihenfolge der Elemente im Quellcode.
Die Umordnungsmöglichkeiten des Rasterlayouts haben absichtlich Auswirkungen nur die visuelle Darstellung, Verlassen der Sprachreihenfolge und Navigation basierend auf der Quellreihenfolge. Auf diese Weise können Autoren die visuelle Präsentation bearbeiten und dabei die Quellreihenfolge beibehalten… - CSS-Rasterlayout-Modul Ebene 1, W3C
Daher ist das CSS-Raster eine ideale Lösung dafür gestalten Sie das angezeigte Label Vor das Kontrollkästchen.
Ankreuzfeldstil mit CSS-Raster
Beginnen wir mit dem HTML-Code. Die Reihenfolge des Kontrollkästchens und der Beschriftung bleibt unverändert. Wir fügen beide nur zu einem Raster hinzu.
Das begleitende CSS lautet wie folgt:
#cbgrid display: grid; Rastervorlagenbereiche: "links rechts"; Breite: 150px; Eingabe [Typ = Ankreuzfeld] Rasterfläche: rechts; label grid-area: left;
Ich werde nicht näher darauf eingehen, wie das CSS-Grid funktioniert, da ich bereits ein geschrieben habe ausführlicher Artikel zum Thema, das kannst du hier lesen. Einige Grundlagen jedoch: die Anzeige: Raster Diese Eigenschaft verwandelt ein Element in einen Gittercontainer, Netzfläche bezeichnet den Gitterbereich, zu dem ein Element gehört, und Raster-Vorlagenbereiche bildet ein Rasterlayout aus verschiedenen Rasterfeldern.
Im obigen Code gibt es zwei Netzbereiche: "links" und "Recht". Sie erfinden es zwei Spalten einer Rasterzeile. Die Checkbox gehört zum "Recht" Bereich und das Label zum "links". Hier ist wie sie auf dem Bildschirm aussehen:
Da wir die relative Platzierung der Checkbox und des Labels im Quellcode nicht geändert haben, können wir dies tun Verwenden Sie immer noch den benachbarten Geschwisterkombinator:
Eingabe: geprüft + Beschriftung / * style me * /
Beachten Sie, dass ein Rasterelement ist immer blockiert; es erscheint mit einem umgebenden Feld, das als bekannt ist Gitter-Ebene-Box. Wenn Sie das nicht wollen, zum Beispiel für ein Label, Legen Sie einen Artikel auf den Artikel (in ein anderes Element einwickeln) und drehen Sie den Wrapper in den Rasterbereich.
Das ist es, Leute. Das CSS-Raster hilft Ihnen hoffentlich dabei, die Layouts dieser frechen Checkboxen genau festzulegen.
