Jak obecnie łączycie jeden element z innym? Możesz spróbować śledzić ich pozycję lub użyć jakiegoś elementu kodu.
<!-- index.html -->
<div class="container">
<a href="/link" class="anchor">I’m the anchor</a>
<div class="anchored">I’m the anchored thing</div>
</div>
/* styles.css */
.container {
position: relative;
}
.anchored {
position: absolute;
}
Te rozwiązania często nie są idealnym rozwiązaniem. Potrzebują języka JavaScript lub wprowadzają dodatkowe znaczniki. Interfejs API pozycjonowania zakotwiczenia CSS ma rozwiązać ten problem, udostępniając interfejs CSS API dla elementów tetheringu. Pozwala określić położenie i rozmiar jednego elementu na podstawie ich położenia i rozmiaru.
Obsługiwane przeglądarki
Możesz wypróbować interfejs API pozycjonowania kotwicy CSS w Chrome Canary za flagą „Eksperymentalne funkcje platformy internetowej”. Aby włączyć tę flagę, otwórz Chrome Canary i stronę chrome://flags. Następnie włącz flagę „Eksperymentalne funkcje platformy internetowej”.
Zespół Oddbird opracowuje kod polyfill. Koniecznie sprawdź repozytorium na stronie github.com/oddbird/css-anchor-positioning.
Możesz sprawdzić, czy możesz skorzystać z tej usługi:
@supports(anchor-name: --foo) {
/* Styles... */
}
Pamiętaj, że ten interfejs API jest nadal w fazie eksperymentalnej i może się zmienić. Ten artykuł obejmuje najważniejsze kwestie. Obecna implementacja nie jest też w pełni zgodna ze specyfikacją grupy roboczej CSS.
Problem
Dlaczego jest to konieczne? Wyraźnym przypadkiem użycia jest tworzenie etykietek lub funkcji przypominających etykietki. W takich przypadkach warto powiązać etykietkę z treścią, do której się ona odnosi. Często zachodzi potrzeba powiązania elementu z innym w jakiś sposób. Przewidujesz też, że interakcja ze stroną nie przerwie tego powiązania, na przykład jeśli użytkownik przewinie lub zmieni rozmiar interfejsu.
Innym problemem jest to, że chcesz mieć pewność, że element powiązany z tetheringiem jest nadal widoczny – na przykład gdy otworzysz etykietkę i zostanie on przycięty przez granice widocznego obszaru. Użytkownicy mogą nie być jednak zadowoleni z tego rozwiązania. Chcesz dostosować etykietkę.
Obecne rozwiązania
Obecnie można rozwiązać ten problem na kilka sposobów.
Na początek podstawowe podejście – „wpakuj reklamę zakotwiczoną”. Zapakowujesz oba elementy w kontener. Następnie za pomocą elementu position możesz umieścić etykietkę względem kotwicy.
<div class="containing-block">
<div class="tooltip">Anchor me!</div>
<a class="anchor">The anchor</a>
</div>
.containing-block {
position: relative;
}
.tooltip {
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
}
Możesz przenieść kontener, aby większość zawartości pozostała w tym miejscu.
Możesz też znać pozycję reklamy zakotwiczonej lub śledzić ją w jakiś sposób. Możesz przekazać je do etykietki z właściwościami niestandardowymi.
<div class="tooltip">Anchor me!</div>
<a class="anchor">The anchor</a>
:root {
--anchor-width: 120px;
--anchor-top: 40vh;
--anchor-left: 20vmin;
}
.anchor {
position: absolute;
top: var(--anchor-top);
left: var(--anchor-left);
width: var(--anchor-width);
}
.tooltip {
position: absolute;
top: calc(var(--anchor-top));
left: calc((var(--anchor-width) * 0.5) + var(--anchor-left));
transform: translate(-50%, calc(-100% - 10px));
}
Ale co zrobić, jeśli nie znasz pozycji reklamy zakotwiczonej? Prawdopodobnie musisz przeprowadzić interwencję z JavaScriptem. Możesz coś zrobić w przykładzie poniżej, ale teraz oznacza to, że Twoje style zaczynają wyciekać z CSS i do JavaScriptu.
const setAnchorPosition = (anchored, anchor) => {
const bounds = anchor.getBoundingClientRect().toJSON();
for (const [key, value] of Object.entries(bounds)) {
anchored.style.setProperty(`--${key}`, value);
}
};
const update = () => {
setAnchorPosition(
document.querySelector('.tooltip'),
document.querySelector('.anchor')
);
};
window.addEventListener('resize', update);
document.addEventListener('DOMContentLoaded', update);
Pojawiają się pewne pytania:
- Kiedy obliczam style?
- Jak obliczyć style?
- Jak często mam obliczać style?
Czy to rozwiązało problem? Może się to okazać przydatne w Twoim przypadku, ale wystąpił jeden problem: nasze rozwiązanie nie dostosowuje się do Twoich potrzeb. Nie jest responsywny. Co się stanie, jeśli mój zakotwiczony element zostanie ucięty przez widoczny obszar?
Teraz musisz zdecydować, czy zareagować na taką sytuację i w jaki sposób. Liczba pytań i decyzji, które musisz podejmować, zaczyna rosnąć. Wystarczy zakotwiczyć jeden element w innym. W idealnym świecie rozwiązanie będzie się dostosowywać i reagować na otoczenie.
Aby uchronić się przed tym uciążliwym zadaniem, można sięgnąć po narzędzie JavaScript. Wiąże się to z kosztami dodania zależności do projektu i może powodować problemy z wydajnością w zależności od tego, jak z nich korzystasz. Na przykład niektóre pakiety używają funkcji requestAnimationFrame, aby utrzymać prawidłową pozycję. Oznacza to, że Ty i Twój zespół musicie zapoznać się z pakietem i jego opcjami konfiguracji. W rezultacie Twoje pytania i decyzje mogą się nie zmniejszyć, ale zmienić. Jest to jeden z aspektów, które wyjaśniają, dlaczego warto pozycjonować zakotwiczone reklamy CSS. Dzięki temu nie musisz myśleć o kwestiach związanych ze skutecznością przy obliczaniu pozycji.
Oto, jak może wyglądać kod w przypadku popularnego pakietu „floating-ui” w przypadku tego problemu:
import {computePosition, flip, offset, autoUpdate} from 'https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.2.1/+esm';
const anchor = document.querySelector('.anchor')
const tooltip = document.querySelector('.tooltip')
const updatePosition = () => {
computePosition(anchor, tooltip, {
placement: 'top',
middleware: [offset(10), flip()]
})
.then(({x, y}) => {
Object.assign(tooltip.style, {
left: `${x}px`,
top: `${y}px`
})
})
};
const clean = autoUpdate(anchor, tooltip, updatePosition);
W tej wersji demonstracyjnej, w której używasz tego kodu, spróbuj zmienić położenie reklamy zakotwiczonej.
„Etykieta” może nie działać w oczekiwany sposób. Reaguje, gdy wykracza poza widoczny obszar na osi Y, ale nie w osi X. Zapoznaj się z dokumentacją, a najprawdopodobniej znajdziesz rozwiązanie, które będzie najbardziej odpowiednie w Twoim przypadku.
Znalezienie pakietu odpowiedniego do danego projektu może jednak zająć dużo czasu. To dodatkowe decyzje i mogą być frustrujące, jeśli nie będzie działać tak, jak chcesz.
Korzystanie z pozycjonowania zakotwiczenia
Wpisz interfejs API pozycjonowania kotwicy CSS. Chodzi o to, aby zachować style w CSS i ograniczyć liczbę decyzji potrzebnych do podjęcia decyzji. Zamierzamy osiągnąć ten sam efekt, ale naszym celem jest poprawa wrażeń deweloperów.
- Obsługa JavaScriptu nie jest wymagana.
- Pozwól przeglądarce ustawić najlepszą pozycję według Twoich wskazówek.
- Brak zależności od innych firm
- Brak elementów kodu.
- Współpracuje z elementami, które są w górnej warstwie.
Odtwórzmy i spróbujmy rozwiązać problem, który próbowaliśmy rozwiązać powyżej. Użyjmy jednak analogii z łodzią z kotwicą. Reprezentują one element zakotwiczony i kotwice. Woda reprezentuje blok zawierający go.
Najpierw musisz wybrać sposób zdefiniowania kotwicy. Możesz to zrobić w kodzie CSS, ustawiając właściwość anchor-name dla elementu zakotwiczonego. Może przyjmować wartość dashed-ident.
.anchor {
anchor-name: --my-anchor;
}
Możesz także zdefiniować kotwicę w kodzie HTML za pomocą atrybutu anchor. Wartość atrybutu to identyfikator elementu kotwicy. Spowoduje to utworzenie niejawnej kotwicy.
<a id="my-anchor" class="anchor"></a>
<div anchor="my-anchor" class="boat">I’m a boat!</div>
Po zdefiniowaniu kotwicy możesz używać funkcji anchor. Funkcja anchor przyjmuje 3 argumenty:
- Element zakotwiczenia: wartość
anchor-namekotwicy. Możesz też pominąć tę wartość, aby użyć kotwicyimplicit. Można ją zdefiniować za pomocą relacji HTML lub właściwościanchor-defaultz wartościąanchor-name. - Reklama zakotwiczona: słowo kluczowe występujące w miejscu, którego chcesz użyć. Może to być
top,right,bottom,left,centeritp. Możesz też przekazać wartość procentową. Na przykład 50% jest równecenter. - Kreacja zastępcza: jest to opcjonalna wartość zastępcza, która może mieć długość lub wartość procentową.
Funkcji anchor używasz jako wartości właściwości wstawiania (top, right, bottom, left lub ich logicznych odpowiedników) zakotwiczonego elementu. Funkcji anchor możesz też użyć w calc:
.boat {
bottom: anchor(--my-anchor top);
left: calc(anchor(--my-anchor center) - (var(--boat-size) * 0.5));
}
/* alternative with anchor-default */
.boat {
anchor-default: --my-anchor;
bottom: anchor(top);
left: calc(anchor(center) - (var(--boat-size) * 0.5));
}
Nie ma właściwości wstawionej center, więc jeśli znasz rozmiar zakotwiczonego elementu, możesz użyć właściwości calc. Dlaczego nie używać translate? Możesz użyć tego:
.boat {
anchor-default: --my-anchor;
bottom: anchor(top);
left: anchor(center);
translate: -50% 0;
}
W przypadku zakotwiczonych elementów przeglądarka nie bierze jednak pod uwagę przekształconych pozycji. Stanie się jasne, dlaczego ma to znaczenie przy uwzględnieniu reklam zastępczych i automatycznego pozycjonowania.
Jak już pewnie widzisz, powyżej korzysta się z właściwości niestandardowej --boat-size. Jeśli jednak chcesz oprzeć rozmiar elementu zakotwiczonego na podstawie rozmiaru reklamy zakotwiczonej, możesz uzyskać dostęp do tego rozmiaru. Zamiast obliczać ją samodzielnie, możesz użyć funkcji anchor-size. Na przykład, aby łódź była 4 razy większa od szerokości kotwicy:
.boat {
width: calc(4 * anchor-size(--my-anchor width));
}
Masz też dostęp do wysokości pojazdu dzięki usłudze anchor-size(--my-anchor height). Możesz za jego pomocą ustawić rozmiar jednej lub obu osi.
Co zrobić, jeśli chcesz zakotwiczyć do elementu z pozycjonowaniem absolute? Zasada jest taka, że elementy nie mogą być elementami równorzędnymi. W takim przypadku możesz opakować reklamę zakotwiczoną kontenerem o pozycjonowaniu relative. Potem możesz utworzyć do niej kotwicę.
<div class="anchor-wrapper">
<a id="my-anchor" class="anchor"></a>
</div>
<div class="boat">I’m a boat!</div>
Obejrzyj prezentację, w której możesz przeciągnąć kotwicę, aby łódź towarzyszyła Ci.
Śledzenie pozycji przewijania
W niektórych przypadkach element kotwicy może znajdować się w przewijanym kontenerze. Jednocześnie zakotwiczony element może znajdować się poza tym kontenerem. Przewijanie odbywa się w innym wątku niż w układzie, musisz więc mieć sposób na jego śledzenie. Jest to możliwe dzięki usłudze anchor-scroll. Ustawiasz go na zakotwiczonym elemencie i przekazujesz mu wartość kotwicy, którą chcesz śledzić.
.boat { anchor-scroll: --my-anchor; }
Skorzystaj z tej demonstracji, w której możesz włączać i wyłączać usługę anchor-scroll za pomocą pola wyboru w rogu.
Tutaj analogia jest nieco płaska, tak jak w idealnym świecie, żeby łódź i kotwica znajdowały się w wodzie. Funkcje takie jak Popover API zwiększają też możliwość utrzymywania powiązanych elementów w pobliżu. Pozycjonowanie zakotwiczenia będzie działać w przypadku elementów, które znajdują się w górnej warstwie. To jedna z głównych zalet interfejsu API: możliwość powiązania elementów w różnych przepływach.
Przyjrzyj się tej prezentacji z przewijanym kontenerem z kotwicami z etykietkami. Elementy etykietki, które są wyskakującymi okienkami, mogą nie znajdować się razem z reklamami zakotwiczonymi:
Zobaczysz jednak, jak wyskakujące okienka śledzą odpowiadające im linki zakotwiczone. Możesz zmienić rozmiar przewijanego kontenera, a jego pozycje zostaną zaktualizowane za Ciebie.
Zastępcza pozycja i automatyczne pozycjonowanie
W tym przypadku możliwości ustawienia kotwicy są jeszcze większe. Element position-fallback może określić położenie zakotwiczonego elementu na podstawie podanego przez Ciebie zestawu wartości zastępczych. To Ty kontrolujesz styl przeglądarki, a następnie ustalasz jej miejsce za Ciebie.
Typowym przypadkiem użycia jest tu etykietka, która powinna przechodzić między wyświetlaniem nad lub pod kotwicą. Zależy ono od tego, czy etykietka zostanie przycięta przez kontener. Zwykle jest to widoczny obszar.
Jeśli zajrzeć do kodu z ostatniej wersji demonstracyjnej, zauważysz, że jest w nim używana właściwość position-fallback. Gdy przewiniesz kontener, możesz zauważyć, że zakotwiczone wyskakujące okienka podskoczyły. Miało to miejsce, gdy ich kotwice zbliżyły się do granicy widocznego obszaru. Obecnie wyskakujące okienka próbują się dostosować, by pozostawały w widocznym obszarze.
Przed utworzeniem jawnego elementu position-fallback możliwe jest też automatyczne pozycjonowanie pozycjonowania zakotwiczenia. Możesz to zrobić bezpłatnie, używając wartości auto zarówno w funkcji kotwicy, jak i w przeciwnej właściwości inset. Jeśli na przykład anchor ma wartość bottom, ustaw top na auto.
.tooltip {
position: absolute;
bottom: anchor(--my-anchor auto);
top: auto;
}
Alternatywnym dla automatycznego pozycjonowania jest użycie jawnego position-fallback. Wymaga to zdefiniowania zestawu kreacji zastępczych pozycji. Przeglądarka będzie je przeglądać, aż znajdzie taką, której może użyć, a następnie zastosuje odpowiednie pozycjonowanie. Jeśli nie może znaleźć takiego, który działa, domyślnie przyjmuje się pierwszą zdefiniowaną regułę.
Pole position-fallback próbujące wyświetlić etykietki powyżej, a następnie poniżej, może wyglądać tak:
@position-fallback --top-to-bottom {
@try {
bottom: anchor(top);
left: anchor(center);
}
@try {
top: anchor(bottom);
left: anchor(center);
}
}
Zastosowanie go do etykietek wygląda tak:
.tooltip {
anchor-default: --my-anchor;
position-fallback: --top-to-bottom;
}
Zastosowanie elementu anchor-default oznacza, że możesz ponownie używać elementu position-fallback w przypadku innych elementów. Możesz też użyć właściwości niestandardowej o zakresie na poziomie, aby ustawić anchor-default.
Przeanalizujmy prezentację ponownie, korzystając z łodzi. Ustawiono position-fallback. Gdy zmienisz położenie kotwicy, łódź będzie dostosowywać się, aby pozostawała w kontenerze. Spróbuj też zmienić wartość dopełnienia, która dostosowuje dopełnienie w treści. Zwróć uwagę, jak przeglądarka poprawia pozycjonowanie. Pozycje zostaną zmienione przez zmianę wyrównania siatki kontenera.
Tym razem pole position-fallback jest bardziej szczegółowe, gdy próbuje znaleźć się w kierunku zgodnym z ruchem wskazówek zegara.
.boat {
anchor-default: --my-anchor;
position-fallback: --compass;
}
@position-fallback --compass {
@try {
bottom: anchor(top);
right: anchor(left);
}
@try {
bottom: anchor(top);
left: anchor(right);
}
@try {
top: anchor(bottom);
right: anchor(left);
}
@try {
top: anchor(bottom);
left: anchor(right);
}
}
Przykłady
Znasz już podstawowe funkcje pozycjonowania zakotwiczenia, przyjrzyjmy się kilku interesującym przykładom. Te przykłady mają pomóc Ci w rozpoczęciu korzystania z pozycjonowania zakotwiczonego. Najlepszym sposobem na dalsze pogłębianie specyfikacji jest korzystanie z opinii użytkowników takich jak Ty.
Menu kontekstowe
Zacznijmy od menu kontekstowego, który korzysta z interfejsu Popover API. Chodzi o to, że kliknięcie przycisku z szewronem powoduje otwarcie menu kontekstowego. Będzie ono miało własne menu, które można rozwinąć.
Znaczniki nie są tu ważną częścią. Jednak każdy z nich ma 3 przyciski z atrybutem popovertarget. Masz 3 elementy, które korzystają z atrybutu popover. Pozwala to otwierać menu kontekstowe bez użycia JavaScriptu. Może to wyglądać tak:
<button popovertarget="context">
Toggle Menu
</button>
<div popover="auto" id="context">
<ul>
<li><button>Save to your Liked Songs</button></li>
<li>
<button popovertarget="playlist">
Add to Playlist
</button>
</li>
<li>
<button popovertarget="share">
Share
</button>
</li>
</ul>
</div>
<div popover="auto" id="share">...</div>
<div popover="auto" id="playlist">...</div>
Teraz możesz zdefiniować element position-fallback i udostępnić go w menu kontekstowym. Wyłączamy też wszystkie style inset w przypadku wyskakujących okienek.
[popovertarget="share"] {
anchor-name: --share;
}
[popovertarget="playlist"] {
anchor-name: --playlist;
}
[popovertarget="context"] {
anchor-name: --context;
}
#share {
anchor-default: --share;
position-fallback: --aligned;
}
#playlist {
anchor-default: --playlist;
position-fallback: --aligned;
}
#context {
anchor-default: --context;
position-fallback: --flip;
}
@position-fallback --aligned {
@try {
top: anchor(top);
left: anchor(right);
}
@try {
top: anchor(bottom);
left: anchor(right);
}
@try {
top: anchor(top);
right: anchor(left);
}
@try {
bottom: anchor(bottom);
left: anchor(right);
}
@try {
right: anchor(left);
bottom: anchor(bottom);
}
}
@position-fallback --flip {
@try {
bottom: anchor(top);
left: anchor(left);
}
@try {
right: anchor(right);
bottom: anchor(top);
}
@try {
top: anchor(bottom);
left: anchor(left);
}
@try {
top: anchor(bottom);
right: anchor(right);
}
}
Dzięki temu uzyskujesz adaptacyjny zagnieżdżony interfejs menu kontekstowego. Spróbuj zmienić pozycję treści przy użyciu zaznaczenia. Wybrana opcja powoduje zaktualizowanie wyrównania siatki. I wpływa na to, w jaki sposób pozycjonowanie zakotwiczenia wpływa na pozycjonowanie wyskakujących okienek.
Skoncentruj się i obserwuj
Ta prezentacja łączy podstawowe elementy CSS poprzez wprowadzenie :has(). Chodzi o przeniesienie wizualnego wskaźnika do input, który jest zaznaczony.
Aby to zrobić, ustaw nową kotwicę w czasie działania. W tej wersji demonstracyjnej usługa niestandardowa o zakresie jest aktualizowana pod kątem danych wejściowych.
#email {
anchor-name: --email;
}
#name {
anchor-name: --name;
}
#password {
anchor-name: --password;
}
:root:has(#email:focus) {
--active-anchor: --email;
}
:root:has(#name:focus) {
--active-anchor: --name;
}
:root:has(#password:focus) {
--active-anchor: --password;
}
:root {
--active-anchor: --name;
--active-left: anchor(var(--active-anchor) right);
--active-top: calc(
anchor(var(--active-anchor) top) +
(
(
anchor(var(--active-anchor) bottom) -
anchor(var(--active-anchor) top)
) * 0.5
)
);
}
.form-indicator {
left: var(--active-left);
top: var(--active-top);
transition: all 0.2s;
}
Ale jak to zrobić? Możesz użyć tej aplikacji jako nakładki z instrukcjami. Etykietka może przemieszczać się między ciekawymi miejscami i aktualizować jej treść. Zawartość może się przenikać. Mogą tu działać dyskretne animacje pozwalające animować display lub wyświetlać przejścia.
Wykres słupkowy – obliczenia
Kolejną ciekawą rzeczą, jaką możesz zrobić z pozycjonowaniem zakotwiczenia, jest połączenie go z elementem calc. Wyobraź sobie wykres z osobnami wyskakującymi z adnotacjami.
Za pomocą CSS min i max możesz śledzić najwyższe i najniższe wartości. Kod CSS tego elementu może wyglądać mniej więcej tak:
.chart__tooltip--max {
left: anchor(--chart right);
bottom: max(
anchor(--anchor-1 top),
anchor(--anchor-2 top),
anchor(--anchor-3 top)
);
translate: 0 50%;
}
Używasz JavaScriptu do aktualizowania wartości na wykresie, a innego kodu CSS do określania stylu wykresu. Natomiast pozycjonowanie zakotwiczenia zajmuje się aktualizacją układu.
Zmień rozmiar uchwytów
Nie musisz stosować kotwicy tylko do jednego elementu. W jednym elemencie możesz użyć wielu kotwic. Przykład: wykres słupkowy. Etykietki były zakotwiczone do wykresu, a następnie do odpowiedniego słupka. Jeśli pójdziesz dalej tym zagadnieniem, możesz wykorzystać tę koncepcję do zmiany rozmiaru elementów.
Punkty zakotwiczenia możesz traktować jak niestandardowe uchwyty zmiany rozmiaru i korzystać z wartości inset.
.container {
position: absolute;
inset:
anchor(--handle-1 top)
anchor(--handle-2 right)
anchor(--handle-2 bottom)
anchor(--handle-1 left);
}
W tej demonstracji funkcja GreenSock Draggable sprawia, że uchwyty można przeciągać. Jednak element <img> zmienia rozmiar, aby wypełnić kontener, który dostosowuje się do poziomu odstępu między uchwytami.
A SelectMenu?
Ostatnia część to zapowiedź tego, co Cię czeka. Możesz jednak utworzyć wyskakujące okienko z możliwością zaznaczenia i uzyskać informacje o pozycjonowaniu zakotwiczenia. Możesz utworzyć podstawy elementu <select>, którego styl można określić.
<div class="select-menu">
<button popovertarget="listbox">
Select option
<svg>...</svg>
</button>
<div popover="auto" id="listbox">
<option>A</option>
<option>Styled</option>
<option>Select</option>
</div>
</div>
Ukryty w ten sposób anchor ułatwi Ci to. Kod CSS dla podstawowego punktu początkowego może jednak wyglądać tak:
[popovertarget] {
anchor-name: --select-button;
}
[popover] {
anchor-default: --select-button;
top: anchor(bottom);
width: anchor-size(width);
left: anchor(left);
}
Połącz funkcje interfejsu Popover API z pozycjonowaniem zakotwiczonych CSS i już niewiele.
To świetnie, gdy zaczniesz wprowadzać takie rzeczy jak :has(). Można obrócić znacznik w przypadku otwarcia:
.select-menu:has(:open) svg {
rotate: 180deg;
}
Co wykorzystasz w następnej kolejności? Czego jeszcze potrzebujemy, aby to select działało? Zapiszemy to w następnym artykule. Bez obaw – wkrótce pojawią się elementy do wyboru z możliwością stylizacji. Nie przegap ważnych informacji!
To wszystko.
Platforma internetowa wciąż się rozwija. Pozycjonowanie zakotwiczenia CSS ma kluczowe znaczenie dla ulepszania sposobu tworzenia elementów interfejsu. Takie podejście odciągnie Cię od tych trudnych decyzji. Jednak nowy interfejs umożliwi Ci robienie rzeczy, które wcześniej nie były dla Ciebie dostępne. Może to być na przykład zmiana stylu elementu <select>. Powiedz nam, co o nim sądzisz.
Zdjęcie: CHUTTERSNAP w Unsplash