Niestandardowe style wyboru z czystym CSS

To jest 20. odcinek z serii poświęconej współczesnym rozwiązaniom CSS problemów, które rozwiązałem w ciągu ostatnich 13 lat pracy jako programista frontendowy.

Nowoczesny CSS daje nam szereg właściwości umożliwiających uzyskanie niestandardowych, wybranych stylów, które mają prawie identyczne początkowy wygląd pojedynczych, wielu i wyłączonych elementów select we wszystkich najpopularniejszych przeglądarkach.

Kilka właściwości i technik, których będzie używać nasze rozwiązanie:

• clip-path, aby utworzyć niestandardową strzałkę menu rozwijanego
• Układ siatki CSS, aby wyrównać natywny wybór i strzałkę
• niestandardowe zmienne CSS dla elastyczny styl
• em jednostki dla względnej wielkości

Typowe problemy z natywnymi zaznaczeniami #

Podobnie jak w przypadku wszystkich typów pól formularzy, <select> różni się początkowym wyglądem w różnych przeglądarkach.

Od lewej do prawej, oto początkowy wygląd <select> w przeglądarkach Firefox, Chrome i Safari:

Różnice obejmują rozmiar ramki, rozmiar czcionki, wysokość linii, a najbardziej wyróżniająca się jest różnica w stylu wskaźnika listy rozwijanej.

Nasz celem jest stworzenie tego samego początkowego wyglądu w tych przeglądarkach, w tym wielokrotnych wyborów i stanów wyłączonych.

Uwaga: Lista rozwijana nadal nie może być stylizowana, więc po otwarciu <select> będzie nadal wybierać style poszczególnych przeglądarek z listy option. To jest w porządku – możemy sobie z tym poradzić, aby zachować swobodną dostępność natywnego zaznaczenia!

Podstawowy kod HTML #

My ” Skoncentruj się na pojedynczym <select>, aby rozpocząć.

Etykieta nie jest częścią naszego ćwiczenia stylizacji, ale jest uwzględniona jako wymóg ogólny, zwłaszcza w przypadku for atrybut mający wartość id na <select>.

Aby zrealizować nasze niestandardowe style, dla uproszczenia w tym samouczku umieściliśmy natywny wybór w dodatkowym elemencie div z klasą select.

Resetowanie i usuwanie dziedziczonych stylów #

Jak jest zawarte we wszystkich moich samouczkach jako nowoczesna najlepsza praktyka, najpierw dodajemy następujący reset:

Następnie możemy rozpocząć regułę dla natywnego select i zastosować następującą zasadę, aby przywrócić jej wygląd:

Chociaż większość z nich jest prawdopodobnie znana, najdziwniejsze jest . Jest to rzadko używana właściwość i zauważysz, że nie jest to miejsce, w którym chcielibyśmy, aby była ona pomocna, ale w tym przypadku przede wszystkim zapewnia nam usunięcie natywnej strzałki rozwijania przeglądarki.

Uwaga: CodePen jest skonfigurowany do używania autoprefixera, który doda wymagane, wstępnie ustalone wersje właściwości appearance. Może być konieczne skonfigurowanie tego specjalnie dla swojego projektu lub ręczne dodanie ich. Mój HTML / Sass Jumpstart zawiera autoprefixer jako część wersji produkcyjnej.

Dobrą wiadomością jest to, że możemy dodać jeszcze jedną regułę, aby usunąć strzałkę dla niższych wersji IE, jeśli jej potrzebujesz:

Ta wskazówka znajduje się w doskonały artykuł z Filament Group, który pokazuje alternatywną metodę tworzenia wybranych stylów.

Ostatnią częścią jest usunięcie domyślnego outline. Nie martw się – my ” Dodamy później zamiennik dla :focus stan!

A oto gif z naszych postępów. Możesz teraz zobaczyć, że przed kliknięciem nie ma teraz żadnego wizualnego wskazania, że jest to select:

Niestandardowe style pola wyboru #

Najpierw skonfigurujmy kilka zmiennych CSS. Pozwoli to na elastyczne ponowne kolorowanie zaznaczenia, tak aby reprezentowało stan błędu.

Uwaga dotycząca ułatwień dostępu: jako element interfejsu użytkownika zaznaczone obramowanie musi mieć kontrast 3: 1 lub większy w stosunku do koloru otaczającej powierzchni.

Teraz nadszedł czas, aby utworzyć niestandardowe style wyboru, które zastosujemy do naszego opakowania div.select:

Najpierw ustawiliśmy pewne ograniczenia szerokości. Wartości min-width i max-width dotyczą głównie tej wersji demonstracyjnej i możesz je porzucić lub zmienić w swoim przypadku.

Następnie stosujemy niektóre właściwości modelu pudełkowego, w tym border, border-radius i padding. Zwróć uwagę na użycie jednostki em, która zachowa te właściwości proporcjonalnie do zestawu font-size.

W stylach resetowania ustawiliśmy kilka właściwości na inherit, więc tutaj je definiujemy, w tym font-size, cursor i line-height.

Na koniec dostarczamy właściwości tła, w tym gradient dla najmniejszego fragmentu wymiar. Jeśli usuniesz właściwości tła, zaznaczenie będzie przezroczyste i podniesie tło strony. Może to być pożądane, jednak pamiętaj i przetestuj wpływ na kontrast.

A oto nasz postęp:

Niestandardowy Wybierz strzałkę w dół #

Jako strzałkę w dół użyjemy jednej z najbardziej ekscytujących nowoczesnych właściwości CSS: clip-path.

Ścieżki przycinania pozwalają nam tworzyć wszelkiego rodzaju kształty przez „przycinanie” kształtów kwadratowych i prostokątnych, które otrzymujemy jako domyślne z większości elementów. Dobrze się bawiłem, używając clip-path w moim ostatnim przeprojektowaniu witryny portfolio.

Przed clip-path lepszym wsparciem, wliczając alternatywne metody:

• background-image – zazwyczaj png, nieco nowocześniejszy byłby SVG
• inline SVG jako dodatkowy element
• sztuczka z obramowaniem do stworzenia trójkąta

SVG może wydawać się optymalnym rozwiązaniem, jednak gdy jest używany jako background-image, traci zdolność działania jak ikona w tym sensie, że nie jest w stanie o zmienić jego właściwości, takie jak kolor wypełnienia, bez całkowitej zmiany definicji. Oznacza to, że nie możemy użyć naszej niestandardowej zmiennej CSS.

Umieszczenie wbudowanego SVG rozwiązuje problem z kolorem fill, jednak oznacza to dołączanie jeszcze jednego elementu za każdym razem, gdy <select> jest zdefiniowane.

W clip-path otrzymujemy wyraźną, skalowalną strzałkę „graphic”, która wygląda jak SVG, ale z korzyściami wynikającymi z możliwości użycia naszej niestandardowej zmiennej i bycia zawartym w stylu w porównaniu ze znacznikami HTML.

Aby utworzyć strzałkę, zdefiniujemy ją jako ::after pseudo-element.

Składnia clip-path jest trochę dziwna, a ponieważ jest nie jest głównym tematem tego artykułu, polecam następujące zasoby:

• Colby Fayock wyjaśnia składnię na przykładzie z tego filmu o jajogłowych.
• Clippy to narzędzie online, które umożliwia wybierasz kształt i dostosowujesz punkty podczas dynamicznego generowania clip-path CSS

Jeśli wykonasz ponownie skrzydło wzdłuż, być może zauważyłeś, że strzałka nie pojawia się pomimo zdefiniowania width i height. Podczas inspekcji okazało się, że szerokość ::after w rzeczywistości nie jest dozwolona.

Rozwiążemy ten problem, aktualizując .select aby użyć układu siatki CSS.

Pozwala to na pojawienie się strzałki poprzez rozszerzenie jej wyświetlanej wartości podobnej do „bloku”.

Na tym etapie możemy sprawdzić, czy rzeczywiście utworzyliśmy trójkąt.

Aby naprawić wyrównanie, użyjemy mojego ulubionego hacka do siatki CSS (stary kapelusz, jeśli przeczytałeś kilka artykułów tutaj!).

Stare rozwiązanie CSS: position: absolute Nowe rozwiązanie CSS: pojedynczy element grid-template-areas zawierający je wszystkie

Najpierw zdefiniujemy nasz obszar, a następnie zdefiniujemy, że select i ::after używają go. Nazwa jest ograniczona do elementu, dla którego został utworzony. Ułatwimy to, nazywając go „select”:

Co daje nam nakładanie się strzałka nad rodzimym wyborem z powodu kontekstu stosowego według kolejności źródłowej:

Możemy teraz użyć właściwości siatki do sfinalizowania wyrównania każdego elementu:

Ta-da!

: focus State #

O tak – pamiętasz, jak usunęliśmy outline? Musimy rozwiązać brakujący :focus po usunięciu tego.

Jest nadchodząca właściwość, której moglibyśmy użyć o nazwie :focus-within, ale nadal najlepiej jest dołączyć do niej polyfill czas.

W tym samouczku użyjemy alternatywnej metody, która daje ten sam wynik, tylko trochę mocniejszy.

Niestety oznacza to, że musimy dodać jeszcze jeden element DOM.

Po natywnym elemencie select, jako ostatni dziecko w .select, dodaj:

Po co? Ponieważ jest to czyste rozwiązanie CSS, umieszczenie go po natywnym zaznaczeniu oznacza, że możemy go zmienić, gdy select jest skupiony za pomocą sąsiedniego selektora rodzeństwa – +.

To pozwala nam stworzyć następującą regułę:

Być może zastanawiasz się, dlaczego wróciliśmy do position: absolute po zapoznaniu się z poprzednim grid-area hackowaniem.

Powodem jest unikanie ponownego obliczania korekt na podstawie dopełnienia. Jeśli spróbujesz samodzielnie, „zobaczysz, że nawet ustawienie width i height na 100% nadal sprawia, że mieści się w wypełnieniu .

Zadanie position: absolute radzi sobie najlepiej z dopasowaniem rozmiaru elementu. Ciągnimy go o dodatkowy piksel w każdym kierunku, aby upewnić się, że zachodzi na krawędź

Ale musimy jeszcze dodać do .select, aby upewnić się, że jest to relatywne do naszego wyboru przez – no cóż, position: relative.

A oto nasz niestandardowy wybór razem, jak widać w Chrome:

Wybór wielokrotny #

Wybory mają drugi smak, który pozwala użytkownikowi wybrać więcej niż jedną opcję. Z perspektywy HTML oznacza to po prostu dodanie atrybutu multiple, ale dodamy też klasę, aby pomóc w dostosowaniu stylu o nazwie select--multiple :

Patrząc na to, widzimy, że „odziedziczył on przychylnie większość naszych stylów, z wyjątkiem tego, że nie potrzebujemy strzałki w tym widoku.

To jest szybka poprawka, aby dostosować nasz selektor, który definiuje strzałkę. Używamy :not(), aby wykluczyć naszą nowo zdefiniowaną klasę:

Mamy kilka drobnych poprawek do wprowadzenia wielokrotnego wyboru, pierwsza to usunięcie dopełnienia, które zostało wcześniej dodane, aby zrobić miejsce dla strzałki:

Domyślnie opcje z długą wartością przepełnią widoczny obszar i zostaną obcięte, ale odkryłem, że główne przeglądarki pozwalają na zastąpienie zawijania, jeśli chcesz:

Opcjonalnie możemy ustawić height na zaznaczeniu, aby uzyskać nieco bardziej niezawodne zachowanie w różnych przeglądarkach. Testując to, dowiedziałem się, że Chrome i Firefox pokażą opcję częściową, ale Safari całkowicie ukryje opcję, której nie można w pełni wyświetlić.

Wysokość należy ustawić bezpośrednio na natywnym zaznaczeniu . Biorąc pod uwagę nasze inne style, wartość 6rem będzie mogła pokazać 3 opcje:

W tym momencie ze względu na bieżącą obsługę przeglądarek wprowadziliśmy tyle poprawek, ile mogliśmy.

Stan :selected elementu options można dość łatwo dostosowywać w przeglądarce Chrome, trochę w przeglądarce Firefox, a wcale nie w Safari. Zobacz demo CodePen, aby zapoznać się z sekcją, którą można odkomentować, aby zobaczyć podgląd.

: disabled Style #

Chociaż polecałbym po prostu nie pokazując wyłączonych kontrolek, powinniśmy przygotować style dla tego stanu tylko po to, aby zakryć nasze podstawy.

Aby podkreślić stan wyłączenia, chcemy zastosować szare tło. Ale ponieważ ustawiliśmy style tła w .select i nie ma selektora „ta :parent, musimy utworzyć ostatnią klasę do obsługi ten stan:

Tutaj „zaktualizowaliśmy kursor jako dodatkową wskazówkę, że z polem nie można wchodzić w interakcje, i zaktualizowaliśmy wartości tła, które poprzednio ustawiliśmy być biały, aby teraz był bardziej szary dla stanu niepełnosprawnego.

Powoduje to następujący wygląd:

Demo #

Możesz to przetestować samodzielnie, ale tutaj jest podgląd pełnego rozwiązania (od lewej) w Firefoksie, Chrome i Safari:

Autor: Stephanie Eckles (@ 5t3ph)