CSSでカーソルの画像を変える方法

CSSでカーソルの画像を変える方法

cursorプロパティに画像のURLを指定すると、カーソルが画像に変更されます。

Custom CursorというChrome拡張を使って可愛いなと思ったので調べてみました。

※ちなみに画像はある程度小さくないと表示されないようです。 自分は40px×40pxで確認しました。

サンプルコード

body {
  cursor: url(./icon01.png), auto;
}

div {
  cursor: url(./icon02.png), auto;
}

カスタムカーソルの場合

.setting-header, .setting-header.cc_cursor, .setting-btn, .setting-collections, .collection-cursors, .collection-cursors.cc_cursor, .box-setting, .box-setting.cc_cursor, .setting-collections.cc_cursor, .setting-content, .setting-content.cc_cursor, .cc_cursor, body, .ogdlpmhglpejoiomcodnpjnfgcpmgale_default, body, html, input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input::-webkit-contacts-auto-fill-button, input:read-only {
   cursor: url(./icon01.png) 3 2, auto !important;
}

.cursor, .cursor.cc_pointer, .lazyload, .lazyload.cc_pointer, .popup-settings-close, .btn-size, .popup-settings-close.cc_pointer, .btn-size.cc_pointer, .close-setting-search.search-button, .cc_pointer, [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration, .paper-button, .ytp-progress-bar-container, input[type=submit], :link, :visited, a > *, img, button, ::-webkit-scrollbar-button, .ogdlpmhglpejoiomcodnpjnfgcpmgale_pointer, ::-webkit-file-upload-button, button, .ytp-volume-panel, #myogdlpmhglpejoiomcodnpjnfgcpmgale .icon {
   cursor: url(./icon02.png) 9 0, auto !important;
}