курсор

/* Keyword value */
cursor: auto;
cursor: pointer;
/* … */
cursor: zoom-out;

/* URL with mandatory keyword fallback */
cursor: url(hand.cur), pointer;

/* URL and coordinates, with mandatory keyword fallback */
cursor:
  url(cursor_1.png) 4 12,
  auto;
cursor:
  url(cursor_2.png) 2 2,
  pointer;

/* URLs and fallback URLs (some with coordinates), with mandatory keyword fallback */
cursor:
  url(cursor_1.svg) 4 5,
  url(cursor_2.svg),
  /* …, */ url(cursor_n.cur) 5 5,
  progress;

/* Global values */
cursor: inherit;
cursor: initial;
cursor: revert;
cursor: revert-layer;
cursor: unset;

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

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

<url> Необязательно

URL-адрес или список URL-адресов, разделённых запятыми url(), url(), …, указывающий на файл изображения. Можно указать несколько значений <url> в качестве резервных вариантов, на случай если некоторые типы изображений курсора не поддерживаются. Значение, не являющееся URL-адресом (одно или несколько ключевых значений) должно находиться в конце списка резервных вариантов.

<x>, <y> Необязательно

Необязательные координаты x и y, указывающие «точку привязки» курсора; точное положение внутри курсора, на которое указывается.

Числа указаны в единицах пикселей изображения. Они относительны к верхнему левому углу изображения, что соответствует 0 0, и ограничены границами изображения курсора. Если эти значения не указаны, они могут быть взяты из файла самого, а в противном случае по умолчанию будут установлены в верхнем левом углу изображения.

keyword

Необходимо указать ключевое значение, указывающее тип курсора для использования или резервный курсор для использования, если все указанные значки не удаётся загрузить.

Доступные ключевые слова перечислены в таблице ниже. Помимо none, что означает отсутствие курсора, имеется изображение, демонстрирующее, как отображались курсоры ранее. Вы можете навести курсор мыши на строки таблицы, чтобы увидеть эффект различных значений ключевых слов курсора в вашем браузере сегодня.

Категория	Ключевое слово	Пример	Описание
Общие	auto		Браузер определит курсор для отображения на основе текущего контекста. Например, эквивалентно text при наведении на текст.
	default		Курсор по умолчанию, зависящий от платформы. Обычно стрелка.
	none		Курсор не отображается.
Ссылки & статус	context-menu		Доступно контекстное меню.
	help		Доступна справочная информация.
	pointer		Курсор — указатель, указывающий на ссылку. Обычно изображение руки, указывающей.
	progress		Программа выполняет фоновые задачи, но пользователь по-прежнему может взаимодействовать с интерфейсом (в отличие от wait).
	wait		Программа выполняет задачи, и пользователь не может взаимодействовать с интерфейсом (в отличие от progress). Иногда изображение песочных часов или часов.
Выделение	cell		Ячейка или набор ячеек таблицы могут быть выделены.
	crosshair		Перекрестный курсор, часто используется для обозначения выделения в растровом изображении.
	text		Текст можно выделить. Обычно имеет форму I-луча.
	vertical-text		Вертикальный текст можно выделить. Обычно имеет форму I-луча, повернутого на бок.
Перетаскивание	alias		Создается псевдоним или ярлык.
	copy		Нечто копируется.
	move		Нечто перемещается.
	no-drop		Элемент не может быть помещён в текущее место. Ошибка Firefox 275173: В Windows и macOS no-drop эквивалентно not-allowed.
	not-allowed		Запрошенное действие не будет выполнено.
	grab		Нечто можно взять (перетащить для перемещения).
	grabbing		Нечто берётся (перетаскивается для перемещения).
Изменение размера & прокрутка	all-scroll		Нечто можно прокрутить в любом направлении (перемещать). Ошибка Firefox 275174: В Windows all-scroll эквивалентно move.
	col-resize		Элемент/колонка может быть изменена по горизонтали. Часто отображается как стрелки, указывающие влево и вправо, разделённые вертикальной чертой.
	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

cursor = 
  [ [ <url> | <url-set> ] [ <x> <y> ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | 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 ]  

<url> = 
  <url()>  |
  <src()>  

<x> = 
  x  

<y> = 
  y  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

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

Пользовательские агенты обязаны поддерживать файлы PNG, файлы SVG v1.1 в защищенном статическом режиме, содержащие естественный размер, и любые другие форматы файлов изображений без анимации, которые они поддерживают для изображений в других свойствах. Веб-браузеры настольных компьютеров также в основном поддерживают формат .cur.

Спецификация также указывает, что пользовательские агенты должны также поддерживать файлы SVG v1.1 в защищенном анимированном режиме, содержащие естественный размер, а также любые другие форматы файлов анимированных изображений, которые они поддерживают для изображений в других свойствах. Пользовательские агенты могут поддерживать как статические, так и анимированные изображения SVG, которые не содержат естественного размера.

iPadOS поддерживает указательные устройства, такие как трекпады и мыши. По умолчанию курсор iPad отображается как круг, и единственное поддерживаемое значение, которое изменит внешний вид указателя, — это text.

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

• pointer-events
• <url> тип