Przejdź do treści
Bezpłatne narzędzie

Przeglądarka kursorów CSS: przetestuj na żywo wszystkie typy kursorów

Przeglądarka kursorów CSS pokazuje wszystkie 36 wartości właściwości cursor, pogrupowane według zastosowania i wyświetlane jako rzeczywisty kursor Twojego systemu. Najedź np. na not-allowed, zobacz przekreślone kółko i skopiuj cursor: not-allowed; jednym kliknięciem. Za darmo, bez rejestracji, bezpośrednio w przeglądarce.

Autor: Justin Schuessler

Kod gotowy? Uruchom swoją stronę dzięki szybkiemu i niezawodnemu hostingowi WWW.

Opublikuj swoją stronę

Wszystkie wartości cursor według zastosowania

Zastosowanie

36 z 36 wartości

Podgląd pokazuje kursor tak, jak wyświetlają go Twój system operacyjny i przeglądarka. Dlatego wiele kursorów wygląda inaczej w macOS, Windows i Linux.

Ogólne3

  • auto

    Przeglądarka sama wybiera kursor, np. tekstowy nad tekstem, a obok strzałkę. To wartość domyślna.

    Najedź tu myszą
  • default

    Zwykła strzałka, także nad tekstem. Do obszarów, których nie można kliknąć.

    Najedź tu myszą
  • none

    Ukrywa wskaźnik myszy, np. podczas oglądania filmów na pełnym ekranie, grania lub używania własnego kursora.

    Najedź tu myszą

Linki i status5

  • pointer

    Dłoń z wyciągniętym palcem wskazującym dla linków, przycisków i innych klikalnych elementów.

    Najedź tu myszą
  • help

    Znak zapytania przy strzałce, gdy dostępna jest pomoc, np. dla ikony informacji z podpowiedzią.

    Najedź tu myszą
  • context-menu

    Wskazuje dostępność menu kontekstowego, np. dla elementów z własnym menu pod prawym przyciskiem myszy.

    Najedź tu myszą
  • progress

    Strzałka z ikoną ładowania: coś ładuje się w tle, ale nadal można korzystać ze strony.

    Najedź tu myszą
  • wait

    Ikona ładowania bez strzałki: interfejs jest zablokowany do zakończenia operacji.

    Najedź tu myszą

Wybór4

  • text

    Kursor tekstowy (I-Beam) dla pól wprowadzania i tekstu, który można zaznaczyć.

    Najedź tu myszą
  • vertical-text

    Poziomy kursor tekstowy dla tekstu pisanego pionowo, np. przy writing-mode: vertical-rl.

    Najedź tu myszą
  • cell

    Gruby znak plus dla komórek, które można zaznaczać, np. w arkuszu kalkulacyjnym.

    Najedź tu myszą
  • crosshair

    Celownik do precyzyjnej pracy, np. na obszarach rysowania, z próbnikiem kolorów lub wycinkami obrazu.

    Najedź tu myszą

Przeciągnij i upuść7

  • grab

    Otwarta dłoń dla elementów, które można przeciągać, np. kart, pozycji listy lub suwaków.

    Najedź tu myszą
  • grabbing

    Zaciśnięta dłoń podczas przeciągania elementu.

    Najedź tu myszą
  • move

    Krzyż ze strzałek dla elementów, które można swobodnie przesuwać, np. okien lub widżetów.

    Najedź tu myszą
  • copy

    Strzałka z plusem: po upuszczeniu powstanie kopia, np. przy przeciąganiu plików.

    Najedź tu myszą
  • alias

    Strzałka z ikoną skrótu: po upuszczeniu powstanie link lub skrót.

    Najedź tu myszą
  • no-drop

    Nie można tu upuścić przeciąganego elementu, np. poza obszarem upuszczania.

    Najedź tu myszą
  • not-allowed

    Przekreślone kółko dla nieaktywnych przycisków i niedozwolonych obecnie działań.

    Najedź tu myszą

Zmień rozmiar14

  • col-resize

    Zmiana szerokości kolumny, np. przy separatorach kolumn tabeli lub podzielonych widoków.

    Najedź tu myszą
  • row-resize

    Zmiana wysokości wiersza, np. przy poziomych separatorach między dwoma obszarami.

    Najedź tu myszą
  • n-resize

    Przeciągnij górną krawędź, aby powiększyć element w górę.

    Najedź tu myszą
  • e-resize

    Przeciągnij prawą krawędź, aby powiększyć element w prawo.

    Najedź tu myszą
  • s-resize

    Przeciągnij dolną krawędź, aby powiększyć element w dół.

    Najedź tu myszą
  • w-resize

    Przeciągnij lewą krawędź, aby powiększyć element w lewo.

    Najedź tu myszą
  • ne-resize

    Przeciągnij prawy górny róg, aby zmienić szerokość i wysokość.

    Najedź tu myszą
  • nw-resize

    Przeciągnij lewy górny róg, aby zmienić szerokość i wysokość.

    Najedź tu myszą
  • se-resize

    Przeciągnij prawy dolny róg, aby zmienić szerokość i wysokość.

    Najedź tu myszą
  • sw-resize

    Przeciągnij lewy dolny róg, aby zmienić szerokość i wysokość.

    Najedź tu myszą
  • ew-resize

    Zmiana szerokości w obu kierunkach, np. przy poziomym suwaku lub separatorze.

    Najedź tu myszą
  • ns-resize

    Zmiana wysokości w obu kierunkach, np. przy pionowym separatorze.

    Najedź tu myszą
  • nesw-resize

    Przeciąganie po przekątnej od prawego górnego do lewego dolnego rogu, np. za róg panelu.

    Najedź tu myszą
  • nwse-resize

    Przeciąganie po przekątnej od lewego górnego do prawego dolnego rogu, np. za uchwyt w prawym dolnym rogu panelu.

    Najedź tu myszą

Przewijanie i powiększanie3

  • all-scroll

    Strzałki we wszystkich kierunkach: zawartość można przewijać w dowolnym kierunku, np. mapę.

    Najedź tu myszą
  • zoom-in

    Lupa z plusem dla obrazów lub map, które można powiększyć kliknięciem.

    Najedź tu myszą
  • zoom-out

    Lupa z minusem, gdy kliknięcie pomniejsza powiększony obraz.

    Najedź tu myszą

Obszar testowy: kursory w akcji

Najedź myszą na przykłady, przeciągnij kartę, separator i róg panelu, a potem kliknij obraz.

  • Przycisk

    pointer

  • Nieaktywny przycisk

    not-allowed

  • Link tekstowy

    Więcej informacji znajdziesz w Dokumentacja.

    pointer

  • Pole tekstowe

    text

  • Karta do przesuwania

    Karta

    Przeciągnij, aby przesunąć

    grab
    grabbing

  • Zmień szerokość kolumny

    Kolumna A · 50 %
    Kolumna B · 50 %
    col-resize

  • Przeciągnij róg panelu

    Panel

    160 × 80 px

    nwse-resize

  • Stan ładowania

    Ładowanie w tle

    Możesz kontynuować pracę.

    Poczekaj

    Obszar jest zablokowany.

    progress
    wait

  • Obraz z możliwością powiększania

    zoom-in
    zoom-out

Przegląd

Czym jest właściwość CSS cursor?

Właściwość CSS cursor określa, jaki wskaźnik myszy pojawia się po najechaniu na element. Wskazuje, co można tam zrobić: dłoń przy pointer oznacza możliwość kliknięcia, kursor tekstowy — zaznaczania, a przekreślone kółko przy not-allowed — brak dostępu. Bez podanej wartości obowiązuje auto i przeglądarka decyduje sama.

Składnia

Jedno słowo kluczowe na regułę wystarczy. Stany takie jak :disabled lub :active otrzymują własny kursor:

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

.card[draggable="true"] {
  cursor: grab;
}

.card[draggable="true"]:active {
  cursor: grabbing;
}

Klasy narzędziowe, takie jak cursor-pointer w Tailwind CSS, ustawiają tę samą deklarację cursor: pointer;. Samo narzędzie kopiuje czysty CSS, nie klasy.

36 standardowych wartości

Specyfikacja CSS zawiera 36 słów kluczowych — od auto i pointer po 14 kursorów do zmiany rozmiaru. To narzędzie pokazuje je wszystkie, pogrupowane według zastosowania.

Dziedziczona

Wartość cursor dotyczy elementu i wszystkich jego elementów potomnych, dopóki któryś z nich nie ustawi własnej wartości. Dlatego cursor: pointer ustawiony na kontenerze działa też na tekst w jego wnętrzu.

Rysowany przez system

CSS określa tylko, który kursor się pojawi. Jego wygląd zależy od systemu operacyjnego i przeglądarki. Dlatego wygląda inaczej w macOS, Windows i Linux.

Bez :hover

Kursor i tak pojawia się tylko wtedy, gdy mysz znajduje się nad elementem. Ustaw więc cursor bezpośrednio na elemencie — osobna reguła :hover nie jest potrzebna.

Typy kursorów

Przegląd wszystkich 36 typów kursorów CSS

Narzędzie dzieli wartości właściwości CSS cursor na sześć grup według zastosowania. Filtrem zastosowania możesz wyświetlić tylko jedną grupę.

Ogólne3

Wartość standardowa auto, zwykła strzałka default oraz none, która ukrywa wskaźnik myszy.

autodefaultnone

Linki i status5

Dłoń dla klikalnych elementów, pomoc, menu kontekstowe i dwa stany ładowania: progress oraz wait.

pointerhelpcontext-menuprogresswait

Wybór4

Poziomy i pionowy kursor tekstowy, plus do komórek tabeli oraz celownik do precyzyjnej pracy.

textvertical-textcellcrosshair

Przeciągnij i upuść7

Otwarta i zamknięta dłoń, krzyż ze strzałkami oraz sygnały przy upuszczaniu: kopiowanie, tworzenie łącza, brak możliwości upuszczenia i niedozwolone działanie.

grabgrabbingmovecopyaliasno-dropnot-allowed

Zmień rozmiar14

14 kursorów zmiany rozmiaru krawędzi, narożników, kolumn i wierszy — od n-resize do nwse-resize.

col-resizerow-resizen-resizee-resizes-resizew-resizene-resizenw-resizese-resizesw-resizeew-resizens-resizenesw-resizenwse-resize

Przewijanie i powiększanie3

Przewijanie we wszystkich kierunkach oraz lupa z plusem lub minusem do obrazów i map.

all-scrollzoom-inzoom-out

Dobre praktyki

Kiedy użyć którego kursora CSS?

Kursor sygnalizuje użytkownikowi, czego może się spodziewać. Dzięki tym zasadom sygnał pozostaje czytelny.

pointer tylko dla elementów klikalnych

Dłoń oznacza, że kliknięcie wywoła działanie. Ustaw ją dla linków, przycisków i klikalnych kart, ale nie dla tekstu ani obszarów bez funkcji.

not-allowed dla wyłączonych elementów

Zablokowany przycisk powinien mieć cursor: not-allowed. Uwaga: przy pointer-events: none kursor się nie zmieni, ponieważ element nie reaguje na mysz.

grab i grabbing przy przeciąganiu

Element, który można przeciągać, ma kursor grab. Podczas przeciągania zmienia się on na grabbing, na przykład przez :active lub klasę ustawianą przez twój skrypt.

text dla pól wprowadzania i tekstu

Pola wprowadzania danych mają już kursor tekstowy. Ustawiaj text samodzielnie tylko tam, gdzie zawartość rzeczywiście można zaznaczać lub edytować.

progress zamiast wait

Jeśli coś ładuje się w tle, a strona nadal działa, użyj progress. Użyj wait tylko wtedy, gdy interfejs jest rzeczywiście zablokowany.

none tylko z zamiennikiem

Niewidoczny wskaźnik myszy dezorientuje. cursor: none pasuje do gier, filmów pełnoekranowych lub własnego kursora zastępującego wskaźnik systemowy.

Jak to działa

Jak znaleźć odpowiedni kursor CSS

Trzy kroki, bez rejestracji i instalacji.

Krok 1

Znajdź kursor

Szukaj wartości, zastosowania takiego jak resize lub drag albo stanu takiego jak disabled. Możesz też filtrować według grupy.

Krok 2

Wypróbuj kursory

Najedź myszą na obszar podglądu kafelka lub użyj przykładów w obszarze testowym, aby zobaczyć rzeczywisty kursor swojego systemu.

Krok 3

Kopiuj deklarację

Kliknięcie przycisku kopiowania umieszcza w schowku dokładnie tę deklarację, np. cursor: not-allowed;. Wklej ją do swojej reguły CSS.

Własne kursory

Ustaw własny kursor za pomocą url()

Zamiast słowa kluczowego możesz wskazać własny obraz jako kursor myszy. Po adresie obrazu możesz opcjonalnie podać współrzędne punktu aktywnego, czyli miejsca, którym klikasz. Na końcu zawsze podaj zastępcze słowo kluczowe na wypadek, gdyby obraz się nie wczytał.

.canvas {
  cursor:
    url("/cursors/pencil.svg") 2 30,
    crosshair;
}

Odpowiednie są formaty PNG i SVG. Przeglądarki wyświetlają własne kursory tylko do rozmiaru 128 × 128 pikseli, a typowy rozmiar to 32 × 32. Obraz kursora powinien wyraźnie wskazywać punkt kliknięcia.

Odkryj więcej

Więcej narzędzi

Formater HTML i CSS online (popraw czytelność kodu)

Formatuj HTML i CSS online, dodawaj wcięcia i poprawiaj czytelność kodu dzięki automatycznemu wykrywaniu języka. Wszystko działa w przeglądarce, bez przesyłania plików.

Autor: Luca Stanek

Konwertuj SVG na PNG (SVG to PNG)

Nowy

Konwertuj SVG na PNG: zapisuj ostre grafiki wektorowe w dowolnym rozmiarze jako PNG, JPG lub WebP, z przezroczystym tłem. Szablony do favicony, emoji Discorda i ikony serwera Minecraft. Wszystko działa w przeglądarce.

Autor: Luca Stanek

Wybór koloru

Przeliczaj kolory na bieżąco między HEX, RGB, HSL, HSV i CMYK, znajdź najbliższy nazwany kolor CSS i sprawdź kontrast WCAG względem czerni i bieli — wszystko w przeglądarce.

Autor: Justin Schuessler

Kontrola kontrastu

Obliczaj na bieżąco współczynnik kontrastu WCAG między dwoma kolorami i sprawdzaj zgodność z AA/AAA oraz wymaganiami dla komponentów UI — bezpośrednio w przeglądarce.

Autor: Justin Schuessler

Generator schematów kolorów

Twórz na żywo dopełniające, analogiczne, triadyczne i inne schematy kolorów na podstawie koloru bazowego — nic nie jest zapisywane ani przesyłane.

Autor: Justin Schuessler

Generator favicon

Wygeneruj z dowolnego obrazu kompletny zestaw favicon — favicon.ico, ikonę Apple-Touch, ikony Android-Chrome, site.webmanifest i gotowy fragment HTML do skopiowania. Wszystko w przeglądarce.

Autor: Jakub Martyniak

FAQ

Często zadawane pytania

Krótkie odpowiedzi dotyczące właściwości CSS cursor i tego narzędzia.

36 słów kluczowych w sześciu grupach: Ogólne (auto, default, none), Linki i stany (pointer, help, context-menu, progress, wait), Zaznaczanie (text, vertical-text, cell, crosshair), Przeciąganie i upuszczanie (grab, grabbing, move, copy, alias, no-drop, not-allowed), 14 kursorów zmiany rozmiaru oraz Przewijanie i powiększanie (all-scroll, zoom-in, zoom-out). Możesz też użyć własnych obrazów przez url().

pointer pasuje do wszystkiego, co wywołuje działanie po kliknięciu: linków, przycisków, klikalnych kart i ikon. Linki domyślnie wyświetlają kursor dłoni, ale przyciski w wielu przeglądarkach już nie. Nie stosuj pointer do tekstu ani obszarów bez funkcji. cursor: hand to stara, niestandardowa wartość z wczesnych wersji Internet Explorera, dlatego nie ma jej wśród 36 wartości narzędzia. Kursor dłoni uzyskasz przez cursor: pointer;.

Ustaw na elemencie cursor: auto, aby przeglądarka sama wybrała kursor, albo cursor: default, aby wyświetlić zwykłą strzałkę. Ponieważ właściwość cursor jest dziedziczona, możesz nadpisać pointer elementu nadrzędnego bezpośrednio na elemencie podrzędnym. Obie wartości znajdziesz w narzędziu w grupie Ogólne.

cursor: not-allowed, czyli przekreślone kółko. Jeśli dla wyłączonego przycisku ustawisz dodatkowo pointer-events: none, ten kursor się nie pojawi, bo element będzie ignorować mysz. W obszarze testowym zobaczysz przycisk z kursorem not-allowed.

grab to otwarta dłoń nad elementem, który można przeciągać, a grabbing to zaciśnięta dłoń podczas przeciągania. move pokazuje krzyż ze strzałek i pasuje do elementów, które można swobodnie przesuwać, takich jak okna czy widżety.

progress pokazuje strzałkę z symbolem ładowania: coś ładuje się w tle, ale ze strony nadal można korzystać. wait pokazuje tylko symbol ładowania i oznacza, że interfejs jest zablokowany. Do większości operacji ładowania w sieci pasuje progress.

Za pomocą cursor: url(cursor.svg) 2 30, crosshair; wskazujesz obraz i opcjonalnie punkt aktywny, a następnie obowiązkowe zastępcze słowo kluczowe. Przeglądarki wyświetlają własne kursory tylko do rozmiaru 128 × 128 pikseli. To narzędzie pokazuje 36 standardowych wartości; nie możesz tu przesyłać własnych obrazów.

CSS określa tylko, który kursor się pojawi. Rysują go system operacyjny i przeglądarka, dlatego wygląda inaczej w macOS, Windows i Linux. Urządzenia dotykowe nie mają kursora myszy: narzędzie wyświetla na nich listę z opisami i przyciskiem kopiowania. Wszystko działa w przeglądarce, bez przesyłania plików.

Masz dodatkowe pytania?

Kontakt z pomocą techniczną
Tworzysz właśnie stronę internetową?

Twoja strona potrzebuje niezawodnego hostingu

VPS od ZAP-Hosting zapewni Twojej stronie niezawodne działanie online.

4,4/5 Trustpilot32.000+ Aktywne serweryOd 2010 roku
Zobacz hosting

Bez konfiguracji. Bez ryzyka. Online w kilka sekund.

Elastyczny okres obowiązywaniaAnuluj w dowolnym momencieOnline w 60 sekund

Szukasz więcej narzędzi? Zobacz wszystkie narzędzia dla programistów