Przejdź do treści

Kształt kursora {cursor}

Jak zmienić kursor (wskaźnik) myszki?

Kształt kursora {cursor}

selektor { cursor: rodzaj }
Selektorem może być praktycznie dowolny znacznik [zobacz: Wstawianie stylów].

Natomiast "rodzaj" odpowiada za kształt, jaki przybierze wskaźnik myszki, po naprowadzeniu go na dany element.

Kursory ogólnego przeznaczenia

  • auto - automatyczny wybór kształtu kursora (zależy od typu elementu, na który wskazujemy - tryb domyślny)

    Przykład

    Wskaż ten tekst myszką

    Zauważ, że kształt kursora typu "auto" powinien zmieniać się w zależności od tego, czy wskażesz myszką tekst czy fragment tła znajdującego się pod nim (już bez tekstu).

  • default - kursor domyślny (strzałka)

    Przykład

    Wskaż ten tekst myszką

  • none - brak kursora (CSS 3) - interpretuje MSIE 9, Firefox 3, Opera, Chrome

    Przykład

    Wskaż ten tekst myszką

Odsyłacze i kursory statusu

  • context-menu - menu kontekstowe, zwykle dostępne po kliknięciu prawym przyciskiem myszki (CSS 3) - interpretuje MSIE 9, Firefox 3

    Przykład

    Wskaż ten tekst myszką

  • help - kursor pomocy

    Przykład

    Wskaż ten tekst myszką

  • pointer - wskaźnik (wskazuje odsyłacz)

    Przykład

    Wskaż ten tekst myszką

  • progress - "postęp" (CSS 2.1, ale nie CSS 2)

    Przykład

    Wskaż ten tekst myszką

  • wait - "poczekaj"

    Przykład

    Wskaż ten tekst myszką

Kursory wyboru

  • cell - wskazuje, że komórka (jak w arkuszu kalkulacyjnym) może być zaznaczona (CSS 3) - interpretuje MSIE 9, Firefox 2, Opera, Chrome

    Przykład

    Wskaż ten tekst myszką

  • crosshair - krzyżyk

    Przykład

    Wskaż ten tekst myszką

  • text - kursor tekstowy

    Przykład

    Wskaż ten tekst myszką

  • vertical-text - pionowy kursor tekstowy (CSS 3) - interpretuje MSIE 6, Firefox 2, Opera, Chrome

    Przykład

    Wskaż ten tekst myszką

Kursory "przeciągnij i upuść"

  • alias - skrót (CSS 3) - interpretuje MSIE 9, Firefox 2, Opera, Chrome

    Przykład

    Wskaż ten tekst myszką

  • copy - kopia (CSS 3) - interpretuje MSIE 9, Firefox 2, Opera, Chrome

    Przykład

    Wskaż ten tekst myszką

  • move - "przesuń"

    Przykład

    Wskaż ten tekst myszką

  • no-drop - wskazuje, że przeciągany element nie może zostać upuszczony w tej pozycji (CSS 3) - interpretuje MSIE 6, Firefox 2, Opera, Chrome

    Przykład

    Wskaż ten tekst myszką

  • not-allowed - żądana akcja nie zostanie przeprowadzona (CSS 3) - interpretuje MSIE 6, Firefox 2, Opera, Chrome

    Przykład

    Wskaż ten tekst myszką

  • grab - wskazuje, że element może zostać przeciągnięty (CSS 3) - interpretuje Firefox 27, Opera 55, Chrome 68

    Przykład

    Wskaż ten tekst myszką

  • grabbing - element jest w trakcie przeciągania (CSS 3) - interpretuje Firefox 27, Opera 55, Chrome 68

    Przykład

    Wskaż ten tekst myszką

Kursory zmiany rozmiaru i przewijania

  • n-resize - "północ" (north): kursor zmiany rozmiaru pionowego

    Przykład

    Wskaż ten tekst myszką

  • ne-resize - "północny wschód" (north-east): kursor zmiany rozmiaru

    Przykład

    Wskaż ten tekst myszką

  • e-resize - "wschód" (east): kursor zmiany rozmiaru poziomego

    Przykład

    Wskaż ten tekst myszką

  • se-resize - "południowy wschód" (south-east): kursor zmiany rozmiaru

    Przykład

    Wskaż ten tekst myszką

  • s-resize - "południe" (south): kursor zmiany rozmiaru pionowego

    Przykład

    Wskaż ten tekst myszką

  • sw-resize - "południowy zachód" (south-west): kursor zmiany rozmiaru

    Przykład

    Wskaż ten tekst myszką

  • w-resize - "zachód" (west): kursor zmiany rozmiaru poziomego

    Przykład

    Wskaż ten tekst myszką

  • nw-resize - "północny zachód" (north-west): kursor zmiany rozmiaru

    Przykład

    Wskaż ten tekst myszką

  • ns-resize - północ-południe (north-south): (CSS 3) - interpretuje MSIE 9, Firefox 2, Opera, Chrome

    Przykład

    Wskaż ten tekst myszką

  • ew-resize - wschód-zachód (east-west): (CSS 3) - interpretuje MSIE 9, Firefox 2, Opera, Chrome

    Przykład

    Wskaż ten tekst myszką

  • nesw-resize - północny wschód-południowy zachód (north-east south-west): (CSS 3) - interpretuje MSIE 9, Firefox 2, Opera, Chrome

    Przykład

    Wskaż ten tekst myszką

  • nwse-resize - północny zachód-południowy wschód (north-west south-east): (CSS 3) - interpretuje MSIE 9, Firefox 2, Opera, Chrome

    Przykład

    Wskaż ten tekst myszką

  • col-resize - pozioma zmiana szerokości kolumny: (CSS 3) - interpretuje MSIE 6, Firefox 2, Opera, Chrome

    Przykład

    Wskaż ten tekst myszką

  • row-resize - pionowa zmiana wysokości wiersza: (CSS 3) - interpretuje MSIE 6, Firefox 2, Opera, Chrome

    Przykład

    Wskaż ten tekst myszką

  • all-scroll - przewijanie w dowolnym kierunku: (CSS 3) - interpretuje MSIE 6, Firefox 2, Opera, Chrome

    Przykład

    Wskaż ten tekst myszką

Kursory powiększania

  • zoom-in - wskazuje, że element może zostać powiększony (CSS 3) - interpretuje Firefox 24, Opera 24, Chrome 37

    Przykład

    Wskaż ten tekst myszką

  • zoom-out - wskazuje, że element może zostać pomniejszony (CSS 3) - interpretuje Firefox 24, Opera 24, Chrome 37

    Przykład

    Wskaż ten tekst myszką

Pytania i odpowiedzi {cursor}

Jak zmienić wygląd kursora?

Aby zmienić wygląd kursora na stronie internetowej, można użyć CSS i właściwości cursor. Na przykład, aby zmienić kursor na obrazek dłoni, można użyć poniższego kodu: "cursor: pointer".

Jak zmienić kursor w CSS?

Aby zmienić kursor za pomocą CSS, należy użyć właściwości cursor. Możesz ustawić różne wartości dla tej właściwości, takie jak pointer, text, grab itp., aby zmienić kształt i wygląd kursora na elementach HTML. Na przykład: element { cursor: pointer }.

Jak zmienić kursor na "łapkę" CSS?

Aby zmienić kursor na "łapkę" w CSS, użyj właściwości cursor i przypisz jej wartość pointer albo grab. Na przykład: element { cursor: grab } zmieni kursor na "łapkę" wskazującą możliwość przechwycenia i przesunięcia elementu.

Przeglądarki


Chrome
Firefox
Edge
Opera
Safari
cursor: wartość1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
cursor: alias1
2008-12-11		1.5
2005-11-29		12
2015-07-29		10.6
2010-07-01		3
2007-10-26
cursor: all-scroll1
2008-12-11		1.5
2005-11-29		12
2015-07-29		10.6
2010-07-01		3
2007-10-26
cursor: auto1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
cursor: cell1
2008-12-11		1.5
2005-11-29		12
2015-07-29		10.6
2010-07-01		3
2007-10-26
cursor: col-resize1
2008-12-11		1.5
2005-11-29		12
2015-07-29		10.6
2010-07-01		3
2007-10-26
cursor: context-menu1
2008-12-11		1.5
2005-11-29		12
2015-07-29		10.6
2010-07-01		3
2007-10-26
cursor: copy1
2008-12-11		1.5
2005-11-29		12
2015-07-29		10.6
2010-07-01		3
2007-10-26
cursor: crosshair1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
cursor: default1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
cursor: e-resize1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
cursor: ew-resize1
2008-12-11		1.5
2005-11-29		12
2015-07-29		10.6
2010-07-01		3
2007-10-26
cursor: grab68
2018-07-24		27
2014-02-04		14
2016-08-02		55
2018-08-16		11
2017-09-19
cursor: grabbing68
2018-07-24		27
2014-02-04		79
2020-01-15		55
2018-08-16		11
2017-09-19
cursor: help1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
cursor: move1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
cursor: n-resize1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
cursor: ne-resize1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
cursor: nesw-resize1
2008-12-11		1.5
2005-11-29		12
2015-07-29		10.6
2010-07-01		3
2007-10-26
cursor: no-drop1
2008-12-11		1.5
2005-11-29		12
2015-07-29		10.6
2010-07-01		3
2007-10-26
cursor: none5
2010-05-25		3
2008-06-17		12
2015-07-29		15
2013-07-02		5
2010-06-07
cursor: not-allowed1
2008-12-11		1.5
2005-11-29		12
2015-07-29		10.6
2010-07-01		3
2007-10-26
cursor: ns-resize1
2008-12-11		1.5
2005-11-29		12
2015-07-29		10.6
2010-07-01		3
2007-10-26
cursor: nw-resize1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
cursor: nwse-resize1
2008-12-11		1.5
2005-11-29		12
2015-07-29		10.6
2010-07-01		3
2007-10-26
cursor: pointer1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
cursor: progress1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
cursor: row-resize1
2008-12-11		1.5
2005-11-29		12
2015-07-29		10.6
2010-07-01		3
2007-10-26
cursor: s-resize1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
cursor: se-resize1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
cursor: sw-resize1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
cursor: text1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
cursor: url1
2008-12-11		1.5
2005-11-29		12
2015-07-29		15
2013-07-02		3
2007-10-26
cursor: vertical-text1
2008-12-11		1.5
2005-11-29		12
2015-07-29		10.6
2010-07-01		3
2007-10-26
cursor: w-resize1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
cursor: wait1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
cursor: zoom-in37
2014-08-26		24
2013-09-17		12
2015-07-29		24
2014-09-02		9
2015-09-30
cursor: zoom-out37
2014-08-26		24
2013-09-17		12
2015-07-29		24
2014-09-02		9
2015-09-30

Komentarze

Zobacz więcej komentarzy

Facebook