CSS свойство `cursor`

Определение и применение

CSS свойство cursor определяет тип отображаемого курсора.

Попробуйте значения cursor

Наведите указатель на оранжевую область. Меняется только вид курсора, действие элемента не добавляется. На устройстве без указателя эффект не виден.

HTML и CSS примера

HTML

<div class="stage">
  <div class="demo-target">Наведите сюда указатель</div>
</div>

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  min-height: 180px;
  border: 2px dashed #607589;
  padding: 12px;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  padding: 10px;
  border: 2px solid #245a85;
  background: #ffe4bd;
  cursor: auto;
}
.neighbor {
  padding: 8px;
  background: #b9d7eb;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  min-height: 180px;
  border: 2px dashed #607589;
  padding: 12px;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  padding: 10px;
  border: 2px solid #245a85;
  background: #ffe4bd;
  cursor: pointer;
}
.neighbor {
  padding: 8px;
  background: #b9d7eb;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  min-height: 180px;
  border: 2px dashed #607589;
  padding: 12px;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  padding: 10px;
  border: 2px solid #245a85;
  background: #ffe4bd;
  cursor: crosshair;
}
.neighbor {
  padding: 8px;
  background: #b9d7eb;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  min-height: 180px;
  border: 2px dashed #607589;
  padding: 12px;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  padding: 10px;
  border: 2px solid #245a85;
  background: #ffe4bd;
  cursor: text;
}
.neighbor {
  padding: 8px;
  background: #b9d7eb;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  min-height: 180px;
  border: 2px dashed #607589;
  padding: 12px;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  padding: 10px;
  border: 2px solid #245a85;
  background: #ffe4bd;
  cursor: wait;
}
.neighbor {
  padding: 8px;
  background: #b9d7eb;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  min-height: 180px;
  border: 2px dashed #607589;
  padding: 12px;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  padding: 10px;
  border: 2px solid #245a85;
  background: #ffe4bd;
  cursor: not-allowed;
}
.neighbor {
  padding: 8px;
  background: #b9d7eb;
}

Поддержка браузерами

Спецификация: CSS ui

Поддерживается во всех основных браузерах с 2021 года.

Отдельные значения (34) поддерживаются не везде — смотрите таблицу.

ВсеКомпьютерыМобильные

Совместимостьcss.properties.cursor
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`cursor`	✓1	✓12	✓1	✓7	✓1.2	✓18	✓95	✓14	✓13.4	✓1.0	✓4.4	✓13.4
`alias`	✓1	✓12	✓1.5	✓10.6	✓3	✓18	✓95	✓14	×	✓1.0	✓4.4	×
`all-scroll`	✓1	✓12	✓1.5	✓10.6	✓3	✓18	✓95	✓14	×	✓1.0	✓4.4	×
`auto`	✓1	✓12	✓1	✓7	✓1.2	✓18	✓95	✓14	✓13.4	✓1.0	✓4.4	✓13.4
`cell`	✓1	✓12	✓1.5	✓10.6	✓3	✓18	✓95	✓14	✓13.4	✓1.0	✓4.4	✓13.4
`col-resize`	✓1	✓12	✓1.5	✓10.6	✓3	✓18	✓95	✓14	×	✓1.0	✓4.4	×
`context-menu`	✓1	✓12	✓1.5	✓10.6	✓3	✓18	✓95	✓14	×	✓1.0	✓4.4	×
`copy`	✓1	✓12	✓1.5	✓10.6	✓3	✓18	✓95	✓14	×	✓1.0	✓4.4	×
`crosshair`	✓1	✓12	✓1	✓7	✓1.2	✓18	✓95	✓14	×	✓1.0	✓4.4	×
`default`	✓1	✓12	✓1	✓7	✓1.2	✓18	✓95	✓14	×	✓1.0	✓4.4	×
`e-resize`	✓1	✓12	✓1	✓7	✓1.2	✓18	✓95	✓14	×	✓1.0	✓4.4	×
`ew-resize`	✓1	✓12	✓1.5	✓10.6	✓3	✓18	✓95	✓14	×	✓1.0	✓4.4	×
`grab`	✓68	✓14	✓27	✓55	✓11	✓68	✓95	✓48	×	✓10.0	✓68	×
`grabbing`	✓68	✓79	✓27	✓55	✓11	✓68	✓95	✓48	×	✓10.0	✓68	×
`help`	✓1	✓12	✓1	✓7	✓1.2	✓18	✓95	✓14	×	✓1.0	✓4.4	×
`move`	✓1	✓12	✓1	✓7	✓1.2	✓18	✓95	✓14	×	✓1.0	✓4.4	×
`n-resize`	✓1	✓12	✓1	✓7	✓1.2	✓18	✓95	✓14	×	✓1.0	✓4.4	×
`ne-resize`	✓1	✓12	✓1	✓7	✓1.2	✓18	✓95	✓14	×	✓1.0	✓4.4	×
`nesw-resize`	✓1	✓12	✓1.5	✓10.6	✓3	✓18	✓95	✓14	×	✓1.0	✓4.4	×
`no-drop`	✓1	✓12	✓1.5	✓10.6	✓3	✓18	✓95	✓14	×	✓1.0	✓4.4	×
`none`	✓5	✓12	✓3	✓15	✓5	✓18	✓95	✓14	×	✓1.0	✓4.4	×
`not-allowed`	✓1	✓12	✓1.5	✓10.6	✓3	✓18	✓95	✓14	×	✓1.0	✓4.4	×
`ns-resize`	✓1	✓12	✓1.5	✓10.6	✓3	✓18	✓95	✓14	×	✓1.0	✓4.4	×
`nw-resize`	✓1	✓12	✓1	✓7	✓1.2	✓18	✓95	✓14	×	✓1.0	✓4.4	×
`nwse-resize`	✓1	✓12	✓1.5	✓10.6	✓3	✓18	✓95	✓14	×	✓1.0	✓4.4	×
`pointer`	✓1	✓12	✓1	✓7	✓1.2	✓18	✓95	✓14	×	✓1.0	✓4.4	×
`progress`	✓1	✓12	✓1	✓7	✓1.2	✓18	✓95	✓14	×	✓1.0	✓4.4	×
`row-resize`	✓1	✓12	✓1.5	✓10.6	✓3	✓18	✓95	✓14	×	✓1.0	✓4.4	×
`s-resize`	✓1	✓12	✓1	✓7	✓1.2	✓18	✓95	✓14	×	✓1.0	✓4.4	×
`se-resize`	✓1	✓12	✓1	✓7	✓1.2	✓18	✓95	✓14	×	✓1.0	✓4.4	×
`sw-resize`	✓1	✓12	✓1	✓7	✓1.2	✓18	✓95	✓14	×	✓1.0	✓4.4	×
`text`	✓1	✓12	✓1	✓7	✓1.2	✓18	✓95	✓14	✓13.4	✓1.0	✓4.4	✓13.4
`url`	✓1	✓12	✓1.5	✓15	✓3	✓18	✓95	✓14	✓13.4	✓1.0	✓4.4	✓13.4
url() positioning syntax	✓1	✓79	✓1.5	✓15	✓3	✓18	✓95	✓14	×	✓1.0	✓4.4	×
`vertical-text`	✓1	✓12	✓1.5	✓10.6	✓3	✓18	✓95	✓14	×	✓1.0	✓4.4	×
`w-resize`	✓1	✓12	✓1	✓7	✓1.2	✓18	✓95	✓14	×	✓1.0	✓4.4	×
`wait`	✓1	✓12	✓1	✓7	✓1.2	✓18	✓95	✓14	×	✓1.0	✓4.4	×
`zoom-in`	✓37	✓12	✓24	✓24	✓9	✓37	✓95	✓24	×	✓3.0	✓37	×
`zoom-out`	✓37	✓12	✓24	✓24	✓9	✓37	✓95	✓24	×	✓3.0	✓37	×
Ещё 4 значений · поддерживаются везде более 3 летСвернуть

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Вид курсора зависит от операционной системы и устройства ввода. Значения grab и grabbing в современном коде записывают без префикса. Изменение курсора само по себе не добавляет перетаскивание или другое действие.

CSS синтаксис:

CSS

cursor: [ [ <url> [ <x> <y> ]? , ]* <cursor-predefined> ];

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

[ ] — группа, а внутри типа — допустимый диапазон; ? — необязательная часть; * — ноль или больше повторений.

JavaScript синтаксис:

JavaScript

element.style.cursor = "alias";

Начальное значение свойства

auto.

Значения свойства

Наведите на строку с интересующим Вас значением курсора для изменения его вида:

Значения cursor
Значение	Описание
`alias`	Курсор указывает, что алиас или ярлык будет создан.
`all-scroll`	Курсор показывает, что что-то можно прокручивать в любом направлении.
`auto`	Браузер устанавливает курсор. Начальное значение.
`cell`	Курсор указывает на то, что ячейка (или группа ячеек) может быть выбрана.
`context-menu`	Курсор указывает на то, что контекстное меню доступно.
`col-resize`	Курсор указывает, что столбец может быть изменен по горизонтали.
`copy`	Курсор указывает, что что-то может быть скопировано.
`crosshair`	Курсор в виде перекрестия. Go! go! go!.
`default`	Курсор по умолчанию.
`e-resize`	Курсор указывает, что край блока перемещается вправо (east-восток).
`ew-resize`	Курсор указывает, двунаправленное изменение размера.
`grab`	Курсор указывает, что что-то можно схватить (перенести).
`grabbing`	Курсор указывает, что что-то переносится.
`help`	Курсор указывает на то, что доступна помощь.
`move`	Курсор указывает на то, что что-то можно переместить.
`n-resize`	Курсор указывает, что край блока перемещается вверх (north - север).
`ne-resize`	Курсор указывает, что край блока перемещается вверх и право (north/east - север/восток).
`nesw-resize`	Курсор указывает, двунаправленное изменение размера.
`ns-resize`	Курсор указывает, двунаправленное изменение размера.
`nw-resize`	Курсор указывает, что край блока перемещается вверх и влево (north/west - север/запад).
`nwse-resize`	Курсор указывает, двунаправленное изменение размера.
`no-drop`	Курсор указывает, что перетаскиваемый объект не может быть помещён здесь.
`none`	Курсор не отображается для элемента.
`not-allowed`	Курсор указывает, что запрошенное действие не будет выполняться.
`pointer`	Курсор-указатель (как правило указывает ссылку).
`progress`	Курсор указывает на то, что программа выполняется.
`row-resize`	Курсор указывает на то, что ряд может быть изменен по вертикали.
`s-resize`	Курсор указывает, что край блока перемещается вниз (south - юг).
`se-resize`	Курсор указывает, что край блока перемещается вниз и право (south/east - юг/восток).
`sw-resize`	Курсор указывает, что край блока перемещается вниз и влево (south/west - юг/запад).
`text`	Курсор указывает, что текст может быть выбран (выделен).
`url()`	Пользовательский курсор из изображения. После адреса можно указать координаты активной точки `x` и `y` в пикселях изображения. Можно перечислить несколько изображений через запятую; список обязательно завершается ключевым словом из этой таблицы, которое используется, если изображения не загрузились. Например: `cursor: url(assets/html5-cursor.png) 16 16, auto;` В этой строке и в примере ниже используется значок HTML5 размером 32×32 пикселя с активной точкой в центре.
`vertical-text`	Курсор указывает, что вертикальный текст может быть выбран (выделен).
`w-resize`	Курсор указывает, что край блока перемещается влево (west-запад).
`wait`	Курсор указывает на то, что программа в настоящее время занята.
`zoom-in`	Курсор показывает, что что-то может быть увеличено.
`zoom-out`	Курсор показывает, что что-то может быть уменьшено.
`initial`	Устанавливает начальное значение свойства.
`inherit`	Наследует вычисленное значение свойства у родительского элемента.
`unset`	Для наследуемого свойства `cursor` наследует вычисленное значение у родительского элемента.
`revert`	Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
`revert-layer`	Сбрасывает значение свойства для текущего слоя каскада `@layer`. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Спецификация

CSS Basic User Interface — спецификация cursor.

Наследуется

Да.

Анимируемое

Тип анимации — дискретный: значение переключается без плавных промежуточных положений.

Примеры, попробуйте сами

Указатель мыши

Наведите мышь на блоки: в третьем курсором служит значок HTML5. Измените координаты активной точки 16 16 или попробуйте text, grab, not-allowed. На сенсорном экране курсор не показывается.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}
.sample {
    padding: 24px;
    background: #d6e5f0;
}

index.html