cursor

Властивість CSS cursor (покажчик) встановлює курсор миші, котрий повинен бути показаний, коли вказівник миші розташований над елементом.

Встановлення курсора повинне повідомити користувачів про дії, котрі можна виконати за допомогою миші в поточному положенні, включаючи: вибір тексту, активацію помічника або контекстних меню, копіювання вмісту, зміну розміру таблиць, і так далі. Можна вказати або тип курсора за допомогою ключового слова, або завантажити певний значок (з необов'язковими зображеннями запасного варіанту, а також з обов'язковим ключовим словом як з остаточним запасним варіантом).

Спробуйте його в дії

Синтаксис

/* Ключові слова */
cursor: auto;
cursor: pointer;
/* … */
cursor: zoom-out;

/* URL з обов‘язковим запасним варіантом – ключовим словом */
cursor: url(hand.cur), pointer;

/* URL і координати, з обов‘язковим запасним варіантом – ключовим словом */
cursor:
  url(cursor_1.png) 4 12,
  auto;
cursor:
  url(cursor_2.png) 2 2,
  pointer;

/* URL'и та URL'и – запасні варіанти (деякі – із координатами), з обов‘язковим запасним варіантом – ключовим словом */
cursor:
  url(cursor_1.svg) 4 5,
  url(cursor_2.svg),
  /* …, */ url(cursor_n.cur) 5 5,
  progress;

/* Глобальні значення */
cursor: inherit;
cursor: initial;
cursor: revert;
cursor: revert-layer;
cursor: unset;

Властивість cursor встановлюється довільною кількістю значень <url> (нуль чи більше), розділених комами, з обов'язковим ключовим словом у кінці. Кожен <url> повинен вказувати на файл зображення. Браузер намагатиметься завантажити перше вказане зображення, переходячи до наступного у випадку невдачі, і переходить до використання ключового слова, якщо жодне з зображень не вдалось завантажити (або якщо жодне не було вказано).

Кожен <url> може мати на додачу два розділені пробілами числові значення, котрі встановлюють координати <x> та <y> розташування гарячої точки курсора на зображенні, відносно його лівого верхнього кута.

Значення

<url> Необов'язкове

url() або розділений комами список url(), url(), … – посилання на файл зображення. На випадок того, що якісь типи зображень курсорів не підтримуються, можна вказати більш ніж одне значення url(). Запасний варіант з одного або більше ключових слів мусить бути присутнім в кінці списку запасних варіантів.

<x>, <y> Необов'язкове

Необов'язкові x та y координати вказують гарячу точку курсора; точну позицію всередині курсора, на котру відбувається вказування.

Числа – в одиницях пікселів зображення. Вони відносні щодо лівого верхнього кута зображення, що відповідає "0 0", і обрізаються в межах зображення курсора. Якщо ці значення не вказані, то вони можуть бути прочитані з самого файлу, а інакше – усталено вважатимуться "0 0".

keyword

Ключове слово мусить бути вказаним, позначаючи, який тип курсора використати, або запасний варіант курсора для використання, якщо всі вказані значки не вдалось завантажити.

Доступні ключові слова вказані у таблиці нижче. Для всіх, крім none – відсутності курсора, додано зображення, котре демонструє, як раніше зображався курсор. Можна навести мишу на ряди таблиці, щоб побачити дію різних ключових слів курсора на браузер нині.

Категорія Ключове слово Приклад Опис
Загальні auto Користувацький агент визначить курсор на основі поточного контексту. Наприклад, еквівалентно до text, коли вказівник знаходиться над текстом.
default груба стрілка вгору вліво Залежний від платформи усталений курсор. Зазвичай – стрілка.
none Не показано жодного курсора.
Посилання та статус context-menu груба стрілка вгору вліво, що трохи перекриває піктограму меню Доступне контекстне меню.
help груба стрілка вгору вліво, поруч з якою – знак питання Доступна допоміжна інформація.
pointer права рука зі вказівним пальцем, напрямленим вгору Курсор – вказівник, що показує посилання. Зазвичай зображення руки, що вказує пальцем.
progress груба стрілка й пісковий годинник Програма зайнята у фоні, але користувач може надалі взаємодіяти з інтерфейсом (на відміну від wait).
wait пісковий годинник Програма зайнята, і користувач не може взаємодіяти з інтерфейсом (на відміну від progress). Іноді – зображення піскового або кишенькового годинника.
Вибір cell грубий знак плюса Комірка таблиці або набір комірок, що можна вибрати.
crosshair знак плюса з двох тонких ліній Хрестовий курсор. Часто використовується для показу вибору на растровому зображенні.
text вертикальний двотавр Текст може бути виділеним. Зазвичай має форму двотавра.
vertical-text горизонтальний двотавр Вертикальний текст може бути виділеним. Зазвичай має форму горизонтального двотавра.
Drag & drop alias груба стрілка вгору вліво, що частково перекриває меншу піктограму теки з вигнутою стрілкою вгору вправо Буде створений псевдонім чи ярлик.
copy груба стрілка вгору вліво, що частково перекриває меншу піктограму теки зі знаком плюса Дещо буде скопійовано.
move знак плюса з двох тонких ліній. Чотири їх кінці – невеликі стрілки назовні Дещо буде переміщено.
no-drop піктограма вказівника і піктограма заборони Елемент не може бути кинутим в поточному положенні.
[Вада Firefox 275173](https://bugzil.la/275173): На Windows та macOS no-drop еквівалентно not-allowed.
not-allowed Піктограма заборони, тобто кружечок з лінією по діагоналі Дія не може бути виконана.
grab повністю розтиснена долоня Дещо може бути схоплено (перетягнуто чи переміщено).
grabbing піктограма затисненої долоні, зворотний бік Щось схоплено (перетягується чи переміщується).
Зміна розміру та прокручування all-scroll піктограма крапки середнього розміру з чотирма трикутниками навколо. Дещо може бути прокручено у будь-якому напрямку (панорамовано).
[Вада Firefox 275174](https://bugzil.la/275174): На Windows all-scroll еквівалентно move.
col-resize col-resize.gif Елемент чи колонка може змінити розмір по горизонталі. Часто зображується у вигляді стрілок, напрямлених наліво та направо із вертикальною смугою між ними.
row-resize дві тонкі паралельні горизонтальні лінії з невеликим стрілками вгору та вниз Елемент чи ряд може змінити розмір по вертикалі. Часто зображається у вигляді стрілок, напрямлених вгору та вниз із горизонтальною смугою між ними.
n-resize тонка довга стрілка вгору Якийсь край може бути переміщений. Наприклад, курсор se-resize використовується, коли рух починається із південно-східного кута рамок.
У певних середовищах зображається еквівалентний двонапрямлений курсор зміни розміру. Наприклад, n-resize та s-resize такі самі, як ns-resize.
e-resize тонка довга стрілка вправо
s-resize тонка довга стрілка вниз
w-resize тонка довга стрілка вліво
ne-resize тонка довга стрілка вгору вправо
nw-resize тонка довга стрілка вгору вліво
se-resize тонка довга стрілка вниз управо
sw-resize тонка довга стрілка вниз уліво
ew-resize тонка довга стрілка вліво-вправо Двонапрямлений курсор зміни розміру.
ns-resize тонка довга стрілка вгору-вниз
nesw-resize тонка довга стрілка вгору вправо та вниз уліво
nwse-resize тонка довга стрілка вгору вліво та вниз управо
Масштабування zoom-in збільшувальне скло зі знаком плюса

Дещо масштабується в бік збільшення або зменшення.

zoom-out збільшувальне скло зі знаком мінуса

Формальне визначення

Формальний синтаксис

[ [ <url> [ <x> <y> ]? , ]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ]

Зауваження щодо використання

Обмеження розмірів значків

Хоч специфікація не обмежує розмір зображення курсора, користувацькі агенти зазвичай обмежують його, аби уникнути можливого зловживання. Наприклад, у Firefox та Chromium зображення курсора усталено обмежені розміром 128x128 пікселів, хоча рекомендується обмежувати розмір зображення курсора до 32x32 пікселів. Заміна курсора з використанням більших зображень, ніж підтримується користувацьким агентом, буде в загальному просто проігнорована.

Підтримувані формати файлів зображень

Специфікація вимагає від користувацьких факторів підтримки файлів PNG, файлів SVG версії 1.1 у безпечному статичному режимі, що мають природний розмір, та будь-яких інших неанімованих форматів файлів зображень, що підтримуються для зображень в інших властивостях. Стільничні браузери також широко підтримують формат файлів .cur.

Далі специфікація показує, що користувацькі агенти повинні також підтримувати файли SVG версії 1.1 files у безпечному анімованому режимі, що мають природний розмір, поруч із будь-якими іншими анімованими форматами файлів зображень, що підтримуються для зображень в інших властивостях. Користувацькі агенти можуть підтримувати як статичні, так анімовані SVG зображення, що не мають природного розміру.

iPadOS

iPadOS підтримує пристрої-вказівники штибу трекпедів та мишей. Усталено курсор iPad виводиться у вигляді кола, і єдине підтримуване значення, що змінює вигляд вказівника — text.

Інші примітки

Заміна курсора, що знаходиться на панелях інструментів, загальноприйнято заблокована для запобігання ошуканству.

Приклади

Встановлення типів курсорів

.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
}

/* Запасний варіант у вигляді ключового слова обов‘язковий при використанні URL */
.baz {
  cursor: url("hyper.cur"), auto;
}

Специфікації

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
cursor
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
footnote
Internet Explorer Full support 4
footnote
Opera Full support 7
Safari Full support 1.2
WebView Android No support No
Chrome Android Full support 18
Firefox for Android Full support 95
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0
alias
Chrome Full support 1
Edge Full support 12
Firefox Full support 1.5
Internet Explorer Full support 10
Opera Full support 10.6
Safari Full support 3
WebView Android No support No
Chrome Android Full support 18
Firefox for Android Full support 95
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0
all-scroll
Chrome Full support 1
Edge Full support 12
Firefox Full support 1.5
Internet Explorer Full support 6
Opera Full support 10.6
Safari Full support 3
WebView Android No support No
Chrome Android Full support 18
Firefox for Android Full support 95
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0
auto
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 4
Opera Full support 7
Safari Full support 1.2
WebView Android No support No
Chrome Android Full support 18
Firefox for Android Full support 95
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0
Bidirectional resize cursors (ew-resize, nesw-resize, ns-resize, and nwse-resize)
Chrome Full support 1
Edge Full support 12
Firefox Full support 1.5
Internet Explorer Full support 10
Opera Full support 10.6
Safari Full support 3
WebView Android No support No
Chrome Android Full support 18
Firefox for Android Full support 95
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0
cell
Chrome Full support 1
Edge Full support 12
Firefox Full support 1.5
Internet Explorer Full support 10
Opera Full support 10.6
Safari Full support 3
WebView Android No support No
Chrome Android Full support 18
Firefox for Android Full support 95
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0
col-resize
Chrome Full support 1
Edge Full support 12
Firefox Full support 1.5
Internet Explorer Full support 6
Opera Full support 10.6
Safari Full support 3
WebView Android No support No
Chrome Android Full support 18
Firefox for Android Full support 95
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0
context-menu
Chrome Full support 1
footnote
Edge Full support 12
Firefox Full support 1.5
footnote
Internet Explorer Full support 10
Opera Full support 10.6
Safari Full support 3
WebView Android No support No
Chrome Android Full support 18
footnote
Firefox for Android Full support 95
Opera Android Full support 14
footnote
Safari on iOS Full support 1
Samsung Internet Full support 1.0
footnote
copy
Chrome Full support 1
Edge Full support 12
Firefox Full support 1.5
Internet Explorer Full support 10
Opera Full support 10.6
Safari Full support 3
WebView Android No support No
Chrome Android Full support 18
Firefox for Android Full support 95
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0
crosshair
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 4
Opera Full support 7
Safari Full support 1.2
WebView Android No support No
Chrome Android Full support 18
Firefox for Android Full support 95
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0
default
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 4
Opera Full support 7
Safari Full support 1.2
WebView Android No support No
Chrome Android Full support 18
Firefox for Android Full support 95
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0
Grab cursors (grab and grabbing)
Chrome Full support 68
footnote
Edge Full support 14
Firefox Full support 27
Internet Explorer No support No
Opera Full support 55
footnote
Safari Full support 11
WebView Android No support No
Chrome Android Full support 68
footnote
Firefox for Android Full support 95
Opera Android Full support 48
footnote
Safari on iOS Full support 1
Samsung Internet Full support 10.0
help
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 4
Opera Full support 7
Safari Full support 1.2
WebView Android No support No
Chrome Android Full support 18
Firefox for Android Full support 95
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0
inherit
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 8
Opera Full support 9
Safari Full support 1.2
WebView Android No support No
Chrome Android Full support 18
Firefox for Android Full support 95
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0
move
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 4
Opera Full support 7
Safari Full support 1.2
WebView Android No support No
Chrome Android Full support 18
Firefox for Android Full support 95
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0
no-drop
Chrome Full support 1
Edge Full support 12
Firefox Full support 1.5
Internet Explorer Full support 6
Opera Full support 10.6
Safari Full support 3
WebView Android No support No
Chrome Android Full support 18
Firefox for Android Full support 95
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0
none
Chrome Full support 5
Edge Full support 12
Firefox Full support 3
Internet Explorer Full support 9
Opera Full support 15
Safari Full support 5
WebView Android No support No
Chrome Android Full support 18
Firefox for Android Full support 95
Opera Android Full support 14
Safari on iOS Full support 4.2
Samsung Internet Full support 1.0
not-allowed
Chrome Full support 1
Edge Full support 12
Firefox Full support 1.5
Internet Explorer Full support 6
Opera Full support 10.6
Safari Full support 3
WebView Android No support No
Chrome Android Full support 18
Firefox for Android Full support 95
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0
pointer
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 6
Opera Full support 7
Safari Full support 1.2
WebView Android No support No
Chrome Android Full support 18
Firefox for Android Full support 95
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0
progress
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 6
Opera Full support 7
Safari Full support 1.2
WebView Android No support No
Chrome Android Full support 18
Firefox for Android Full support 95
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0
row-resize
Chrome Full support 1
Edge Full support 12
Firefox Full support 1.5
Internet Explorer Full support 6
Opera Full support 10.6
Safari Full support 3
WebView Android No support No
Chrome Android Full support 18
Firefox for Android Full support 95
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0
text
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 4
Opera Full support 7
Safari Full support 1.2
WebView Android No support No
Chrome Android Full support 18
Firefox for Android Full support 95
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0
Unidirectional resize cursors (n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, and sw-resize)
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 4
Opera Full support 7
Safari Full support 1.2
WebView Android No support No
Chrome Android Full support 18
Firefox for Android Full support 95
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0
url()
Chrome Full support 1
Edge Full support 12
Firefox Full support 1.5
footnote
Internet Explorer Full support 6
Opera Full support 15
Safari Full support 3
WebView Android No support No
Chrome Android Full support 18
Firefox for Android Full support 95
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0
url() positioning syntax
Chrome Full support 1
Edge Full support 79
Firefox Full support 1.5
footnote
Internet Explorer No support No
Opera Full support 15
Safari Full support 3
WebView Android No support No
Chrome Android Full support 18
Firefox for Android Full support 95
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0
vertical-text
Chrome Full support 1
Edge Full support 12
Firefox Full support 1.5
Internet Explorer No support No
Opera Full support 10.6
Safari Full support 3
WebView Android No support No
Chrome Android Full support 18
Firefox for Android Full support 95
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0
wait
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 4
Opera Full support 7
Safari Full support 1.2
WebView Android No support No
Chrome Android Full support 18
Firefox for Android Full support 95
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0
Zoom cursors (zoom-in and zoom-out)
Chrome Full support 37
Edge Full support 12
Firefox Full support 24
Internet Explorer No support No
Opera Full support 24
Safari Full support 9
WebView Android No support No
Chrome Android Full support 37
Firefox for Android Full support 95
Opera Android Full support 24
Safari on iOS Full support 1
Samsung Internet Full support 3.0

Дивіться також