Podgląd kursorów CSS

Sprawdź wizualnie wszystkie wartości CSS cursor: (pointer, crosshair, grab, zoom-in i 30+). Kliknij na element by przetestować kursor. Bezpłatnie.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Ustawienia

Cursor

Sample

Fallback Opcja kursorów (pokaż fallback)

Podgląd na żywo

Strefa testowania kursora

Najedź myszką tutaj, aby zobaczyć kursor: pointer

Hover this preview area to feel the cursor. Use it for buttons, links, drag handles, resizers, and more.

Wynik CSS

Ustaw parametry i kliknij „Przetwórz”, aby zobaczyć wynik.

Oceń to narzędzie:

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

Podgląd kursorów CSS – wszystkie wartości właściwości cursor

Właściwość CSS cursor: kontroluje wygląd wskaźnika myszy nad elementem. Prawidłowy kursor poprawia UX – użytkownik od razu wie czy element jest klikany, przeciągany, czy edytowalny. Narzędzie wyświetla wizualny podgląd wszystkich 30+ wartości cursor.

podgląd kursora CSS cursor CSS wartości CSS cursor pointer grab crosshair właściwość cursor przeglądarki

Wszystkie wartości cursor CSS

Domyślne: auto, default, none. Linki: pointer (łapka). Tekst: text (belka), vertical-text. Narzędzia: crosshair, cell. Drag: grab, grabbing (przy przeciąganiu), move, all-scroll, col-resize, row-resize. Resize: n-resize, s-resize, e-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize, ew-resize, ns-resize, nesw-resize, nwse-resize. Status: wait (klepsydra), progress (kółko+wskaźnik), not-allowed (zakaz), no-drop, help, zoom-in, zoom-out, copy, alias.

Kiedy używać jakich kursorów

pointer: linki, przyciski, elementy klikalne. default: pasywne elementy. text: pola tekstowe, edytowalne treści. grab/grabbing: drag-and-drop (grab = hover, grabbing = aktywne przeciąganie). crosshair: narzędzia rysowania, wybieranie punktu. not-allowed: wyłączone elementy (disabled). zoom-in/zoom-out: galerie, mapy. col-resize/row-resize: zmienialne rozmiary kolumn/wierszy tabeli lub paneli.

Własny kursor CSS

cursor: url("kursor.png"), pointer; (fallback po przecinku). Format: PNG, CUR, ANI. Rozmiar: max 128×128px, zalecane 32×32px (mniejszy = lepsze UX). hotspot: cursor: url("cel.png") 16 16, crosshair; (16px = punkt aktywny). Animowany kursor: cursor: url("anim.ani"), auto; (tylko Windows IE). @keyframes + JS: zmiana klasy z różnymi url() kursory.

Kursor a dostępność

Nie usuwaj kursora: cursor: none utrudnia nawigację osobom z trudnościami motorycznymi. Nie używaj pointer na nieklikalnych elementach: mylące. cursor: not-allowed dla disabled: lepsza niż brak zmiany (użytkownik wie że nie można kliknąć). cursor: help dla elementów z tooltipem. Konsekwencja: ten sam typ elementu = ten sam kursor.

Najczęstsze pytania

Jak zmienić kursor globalnie na stronie?

body { cursor: crosshair; } – zmienia domyślny kursor. Ale: elementy interaktywne (a, button, input) mają swój cursor przez UA stylesheet – będzie nadpisany. Lepiej: CSS variables. :root { --cursor-base: default; } body { cursor: var(--cursor-base); } i zmieniaj zmienną przez JS.

Jak wykryć typ urządzenia do zarządzania kursorem?

@media (hover: hover) { .btn:hover { cursor: pointer; } } – tylko dla myszy. @media (pointer: coarse) – urządzenie dotykowe (mobilne). @media (pointer: fine) – mysz lub rysik. Na mobile: cursor: nie ma znaczenia – dotykiem nie ma kursora. Dobre praktyki: nie polegaj na hover-only interakcjach.

Czy cursor: pointer wpływa na wydajność?

Nie – cursor CSS to wskazówka dla systemu operacyjnego, rendering przez OS cursor manager, nie przez CSS compositor. Brak wpływu na repaint/reflow. Zmiana cursor przez JS (element.style.cursor = ...) jest natychmiastowa. Własne kursory (url()): mogą powodować lag przy pierwszym załadowaniu obrazu kursora.

Jak zablokować zmianę kursora na iframe?

Problem: iframe z zewnętrznym contentem zmienia kursor. Rozwiązanie: pointer-events: none na iframe (blokuje interakcję i kursor). Lub: overlay div na iframe z własnym cursor. Technika: wrapper { position: relative; } .overlay { position: absolute; inset: 0; cursor: default; }

Kursor w trybie ciemnym i jasnym?

CSS cursor: niezależny od color scheme – wygląd kursora zależy od OS. Custom cursor: możesz mieć dwie wersje. @media (prefers-color-scheme: dark) { body { cursor: url("cursor-dark.png"), auto; } } Uwaga: wiele systemów automatycznie invertuje systemowy kursor w trybie ciemnym.

Powiązane narzedzia: tester CSS animacji, generator CSS gradientow i podglad wlasciwosci CSS.