Kursory - CSS
W tym rozdziale dowiesz się...
Jak zmienić kształt wskaźnika myszki na stornie WWW?
Kształt kursora {cursor}Jak zmienić kursor (wskaźnik) myszki?
- Kursor obrazkowy {cursor: url}
Jak wczytać kursor (wskaźnik) myszki z pliku?
- Kolor karetki tekstowej {caret-color}
W jaki sposób zmienić kolor migającego wskaźnika (karetki, kursora), który pojawia się podczas wpisywania tekstu z klawiatury?
PowtórkaCSS
Kształt kursora {cursor}
Jak zmienić kursor (wskaźnik) myszki?
Kształt kursora {cursor}
(interpretuje Internet Explorer 4, Firefox, Opera 7, Chrome)
selektor { cursor: rodzaj }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.
Kursor obrazkowy {cursor: url}
Jak wczytać kursor (wskaźnik) myszki z pliku?
(interpretuje MSIE 6; Firefox, Opera 15 i Chrome tylko pliki *.cur - również w systemie Linux)
- Domyślny gorący punkt:
selektor { cursor: url(ścieżka dostępu), rodzaj } - Ustalony gorący punkt (CSS 3 - Firefox, Chrome):
selektor { cursor: url(ścieżka dostępu) x y, rodzaj }
Ścieżkę dostępu należy konstruować względem lokalizacji arkusza CSS, a nie względem adresu dokumentu HTML!
Zwracam również uwagę, że podanie na końcu deklaracji ogólnego rodzaju kursora jest konieczne - inaczej nie zostanie on wyświetlony w Firefoksie.
Dzięki takiej deklaracji możliwe jest wczytanie dowolnego kursora z pliku, który znajduje się, razem ze stroną, na dysku serwera w Internecie.
Przypominam, że w systemie operacyjnym Windows zwykłe kursory mają rozszerzenie *.cur, natomiast kursory animowane *.ani. Ponadto specyfikacja CSS 2.1 podaje tutaj możliwość wczytania kursora SVG.
Możliwe jest również podanie listy kursorów rozdzielonych przecinkami. W takim przypadku wczytany zostanie pierwszy z listy plik, który przeglądarka potrafi obsłużyć. Dlatego właśnie na końcu listy powinien zostać podany tradycyjny kształt:
:link, :visited { cursor: url(example.svg#linkcursor), url(hyper.cur), pointer }
Każdy kursor posiada ustalony jednopikselowy tzw. gorący punkt (ang. hotspot). Ten punkt jest miejscem aktywnym kursora, tzn. właśnie za jego pomocą wskazywane są elementy. Zwykle leży on na czubku grota strzałki lub w centrum krzyżyka kursora. Możemy jednak ten punkt przesunąć w prawo (wartość x) lub/i w dół (wartość y) względem lewego-górnego narożnika grafiki (wymagane jest podanie pozycji zawsze za pomocą dwóch współrzędnych).
Przykład {cursor: url}
Wskaż ten tekst myszką
Pytania i odpowiedzi {cursor: url}
Jak ustawić dowolny kursor?
Aby ustawić dowolny kursor, użyj właściwości cursor w CSS i określ odpowiednią wartość kursora. Możesz również użyć niestandardowego obrazka jako kursora za pomocą url('ścieżka/do/obrazka.png'). Na przykład: element { cursor: url('myszka.png'), auto } ustawi niestandardowy obrazek jako kursor, który zmieni się na domyślny (auto) w przypadku braku dostępności.
Jak zrobić "customowy" kursor?
Aby stworzyć niestandardowy kursor, można użyć właściwości cursor w CSS i wskazać ścieżkę do własnego obrazka kursora za pomocą url('ścieżka/do/obrazka.png'). Na przykład: element { cursor: url('kursor.png'), auto } ustawi niestandardowy obrazek jako kursor, a auto zostanie użyte, jeśli obrazek nie będzie dostępny.
Kolor karetki tekstowej {caret-color}
W jaki sposób zmienić kolor migającego wskaźnika (karetki, kursora), który pojawia się podczas wpisywania tekstu z klawiatury?
(CSS 3 - interpretuje Firefox 53, Opera 44, Chrome 57)
selektor { caret-color: kolor }Natomiast jako "kolor" należy podać definicję koloru albo wartość auto (zresetowanie karetki testowej do domyślnego koloru).
W przypadku interaktywnych elementów strony, w których można wpisywać tekst, pojawia się tzw. karetka. Wskazuje ona miejsce, w którym pojawią nowe znaki tekstu, kiedy zaczniemy je wpisywać z klawiatury. Karetka tekstowa najczęściej ma postać pionowej, migającej kreski. Zdarzają się jednak inne kształty: pionowa kreska z krótkim poziomym daszkiem i podstawką albo migająca, wypełniona kratka (zwłaszcza na terminalach tekstowych o ograniczonej rozdzielczości).
Domyślnie karetka tekstowa zwykle przyjmuje taki sam kolor jak tekst. Przez to czasami może zostać pomylona np. z wielką literą "I" albo małą literą "l". Może się też zdarzyć, że ze względu na dobrany kolor tła, kontrast pomiędzy nim a karetką tekstu nie będzie wystarczający, więc będzie ona słabo widoczna, co utrudni użytkownikowi wprowadzanie tekstu. W takich przypadkach mamy możliwość ustalenia innego koloru karetki tekstowej.
Przykład {caret-color}
Pytania i odpowiedzi
Poniżej znajdziesz wykaz najczęściej zadawanych pytań z tego rozdziału wraz ze zwięzłymi odpowiedziami i gotowymi do użycia przykładami kodu CSS. Aby sprawdzić bardziej szczegółowy opis, kliknij odnośnik "Zobacz więcej..." pod wybraną odpowiedzią.
Jak zmienić kursor (wskaźnik) myszki?
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.
Jak wczytać kursor (wskaźnik) myszki z pliku?
Jak ustawić dowolny kursor?
Aby ustawić dowolny kursor, użyj właściwości cursor w CSS i określ odpowiednią wartość kursora. Możesz również użyć niestandardowego obrazka jako kursora za pomocą url('ścieżka/do/obrazka.png'). Na przykład: element { cursor: url('myszka.png'), auto } ustawi niestandardowy obrazek jako kursor, który zmieni się na domyślny (auto) w przypadku braku dostępności.
Jak zrobić "customowy" kursor?
Aby stworzyć niestandardowy kursor, można użyć właściwości cursor w CSS i wskazać ścieżkę do własnego obrazka kursora za pomocą url('ścieżka/do/obrazka.png'). Na przykład: element { cursor: url('kursor.png'), auto } ustawi niestandardowy obrazek jako kursor, a auto zostanie użyte, jeśli obrazek nie będzie dostępny.
Powtórka
Sprawdź, czy pamiętasz, za co odpowiadają poniższe fragmenty kodu źródłowego CSS. W razie wątpliwości kliknij odnośnik "Zobacz więcej..." pod wybraną grupą przykładów.