Как изменить внешний вид курсора (CSS cursor)?

Размещена 3 сентабря, 2008 года

Вид курсора определяется с помощью CSS свойства cursor.

В спецификации CSS2 определены следующие значения свойства cursor:

Значения, определяющие стандартные курсоры:

• auto
• crosshair
• default
• pointer
• move
• e-resize
• ne-resize
• nw-resize
• n-resize
• se-resize
• sw-resize
• s-resize
• w-resize
• text
• wait
• help

Пример: SPAN.help { cursor : help; }

Курсор определенный пользователем:

url('путь к курсору'), стандартный курсор

Примеры:

P { cursor : url("my.cur"), text; }
P { cursor : url("my.svg"), url("my.cur"), auto; }

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

Пользовательские курсоры поддерживаются начиная с IE6+, Firefox 1.5.

В качестве пользовательского курсора можно использовать файлы в формате CUR, ANI (только IE) или SVG курсоры (только Firefox 1.5+).

Значение inherit. Это значение говорит о том, что свойство наследуется от элемента-родителя.

Значение курсора по умолчанию: auto

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

• <span style="cursor: url(cursor.cur), auto">url</span>
• <span style="cursor: auto">Auto</span>
• <span style="cursor: crosshair">Crosshair</span>
• <span style="cursor: default">Default</span>
• <span style="cursor: pointer">Pointer</span>
• <span style="cursor: move">Move</span>
• <span style="cursor: e-resize">e-resize</span>
• <span style="cursor: ne-resize">ne-resize</span>
• <span style="cursor: nw-resize">nw-resize</span>
• <span style="cursor: n-resize">n-resize</span>
• <span style="cursor: se-resize">se-resize</span>
• <span style="cursor: sw-resize">sw-resize</span>
• <span style="cursor: s-resize">s-resize</span>
• <span style="cursor: w-resize">w-resize</span>
• <span style="cursor: text">text</span>
• <span style="cursor: wait">wait</span>
• <span style="cursor: help">help</span>