Zaawansowane pole wyboru Stylizacja za pomocą CSS Grid
The Moduł układu siatki CSS potrafią nie tylko rozwiązać gigantyczny problem z układem, ale także kilka dobrych starych problemów radzenie sobie z tym przez długi czas, Jak na przykład stylizacja etykiety pola wyboru.
Chociaż istnieje stosunkowo prosta metoda stylizacji etykiety, gdy się pojawia po pole wyboru nie jest takie proste, gdy pojawia się etykieta przed to.
Stylizacja pola wyboru bez siatki CSS
Stylizacja etykiety po pole wyboru to coś, co nasi programiści robią od czasu, gdy gdzieś przeczytaliśmy. Ta technika jest jednym z głównych i starych przykładów potężnej dynamiki, jaką może posiadać CSS.
Oto kod, który już znasz stylizuje etykietę po zaznaczone pole wyboru:
input: checked + label / * style me * /
ZA stylizowana etykieta po pole wyboru może wyglądać tak (jednak możesz również użyć innych reguł stylu):
Powyższy kod CSS używa sąsiedni kombinator rodzeństwa oznaczone przez + klawisz. Gdy pole wyboru jest w polu :sprawdzone stan, element po to (zazwyczaj etykieta) może być stylizowana przy użyciu tej metody.
Taka prosta i skuteczna technika! Co mogło możliwie pójść źle z tym? Nic - dopóki nie chcesz wyświetlić etykiety przed pole wyboru.
Sąsiadujący kombinator rodzeństwa wybiera następny element; Oznacza to, że etykieta musi nadejść po pole wyboru w kodzie źródłowym HTML.
Tak więc, aby pojawiła się etykieta przed przynależne pole wyboru na ekranie, nie możemy po prostu przesunąć go przed polem wyboru w kodzie źródłowym, jako a poprzedni selektor rodzeństwa nie istnieje w CSS.
Która pozostawia tylko jedną opcję: zmiana położenia pola wyboru i etykiety za pomocą przekształcać lub pozycja lub margines lub inna właściwość CSS o jakiejś mocy telekinetycznej, tak aby etykieta pojawiła się po lewej stronie pola wyboru na ekranie.
Problemy z metodą tradycyjną
Nie ma nic głównie źle z powyższą techniką, ale może być nieefektywne w niektórych przypadkach. Mam na myśli przypadki, w których przestawione pozycje pola wyboru i etykiety już nie działają.
Myśl responsywnie, na przykład. Być może będziesz musiał zmienić rozmiar lub zmienić położenie pola wyboru zgodnie z urządzeniem, na którym jest wyświetlane. Kiedy tak się stanie, będziesz należy również zmienić położenie etykiety, ponieważ nie nastąpi automatyczne wyrównanie etykiety w odpowiedzi na zmianę położenia / rozmiaru pola wyboru.
Możemy wyeliminować tę wadę, jeśli tylko możemy podaj solidny układ pola wyboru i etykiety, zamiast z grubsza ustawiać je na stronie.
Jednak prawie wszystkie systemy układów, takie jak tabele lub kolumny, wymagają dodaj etykietę przed polem wyboru w kodzie źródłowym aby wyglądał tak samo na ekranie. To jest coś, czego nie chcemy robić, ponieważ selektor następnego elementu na etykiecie przestanie działać.
Z drugiej strony CSS Grid to system layoutów nie zależy od rozmieszczenia / kolejności elementów w kodzie źródłowym.
Możliwości zmiany kolejności układu siatki celowo wpływają tylko rendering wizualny, pozostawiając porządek mowy i nawigację na podstawie kolejności źródeł. Dzięki temu autorzy mogą manipulować prezentacją wizualną, pozostawiając nienaruszoną kolejność źródeł… - CSS Grid Layout Module Level 1, W3C
Tak więc siatka CSS jest idealnym rozwiązaniem stylizuj wyświetlaną etykietę przed pole wyboru.
Stylizacja pola wyboru z CSS Grid
Zacznijmy od kodu HTML. Kolejność pola wyboru i etykiety pozostanie taka sama jak poprzednio. Po prostu dodajemy oba z nich do siatki.
Towarzyszący CSS jest następujący:
#cbgrid display: grid; grid-template-areas: „left right”; szerokość: 150px; input [type = checkbox] grid-area: right; label obszar siatki: lewo;
Nie będę szczegółowo omawiać działania siatki CSS, ponieważ już napisałem szczegółowy artykuł na ten temat, które możesz przeczytać tutaj. Niektóre podstawy: jednak wyświetlacz: siatka właściwość zamienia element w kontener siatki, obszar siatki identyfikuje obszar siatki, do którego należy element, i obszary siatki-szablonu tworzy układ siatki złożony z różnych obszarów siatki.
W powyższym kodzie są dwa obszary siatki: "lewo" i "dobrze". Tworzą dwie kolumny rzędu siatki. Pole wyboru należy do "dobrze" obszar i etykieta do "lewo". Oto jak wyglądają na ekranie:
Ponieważ nie zmieniliśmy względnego położenia pola wyboru i etykiety w kodzie źródłowym, możemy nadal używaj sąsiedniego kombinatora rodzeństwa:
input: checked + label / * style me * /
Zauważ, że element siatki to zawsze zablokowany; pojawia się z otaczającym pudełkiem zwanym pole na poziomie siatki. Jeśli tego nie chcesz, na przykład dla etykiety, umieść opakowanie na tym przedmiocie (zawiń w inny element) i obróć owijkę w obszar siatki.
To wszystko, ludzie. Miejmy nadzieję, że siatka CSS pomoże Ci zrównoważyć układy tych bezczelnych pól wyboru.
