| 属性名 | cursor |
|---|---|
| 値 | [<uri> [ <x> <y> ]? , ]* <cursor-type> |
| 値の詳細 | <cursor-type> = 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 |
| 初期値 | auto |
| 適用可能要素 | すべての要素 |
| 継承 | 継承する |
| メディア | visual |
| サポート | https://caniuse.com/css3-cursors |
要素にマウスを乗せたときに表示されるマウスカーソルの形状を指定します。
| 値 | 説明 |
|---|---|
| <uri> | カーソルの画像ファイルをURLを指定します。 |
| <x> <y> | 画像を表示する際の横方向、縦方向のオフセット値を指定します。サポートしているブラウザはまだ少ないようです。 |
| <cursor-type> | カーソル形状を指定します。下記を参照してください。 |
カーソル形状の意味と、各ブラウザでの対応状況を下記に示します。
| カーソル形状 | 説明 | IE | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|---|
| 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で指定する際は、カンマでいくつかの画像ファイルを指定します。下記の例では、myhelp.cur を探し、サポートされていない、または見つからなかった場合は myhelp.gif を探し、これも表示できない場合は help カーソルを表示します。IE9 は .ani, .cur、Firefox 12, Chrome 12, Safari 5.1 は .cur, .gif, .png, .jpg, .bmp、Opera 11.6 は未対応のようです。
.sample { cursor: url(myhelp.cur), url(myhelp.gif), help; }
<div style="cursor:url(../image/sample.cur), auto">url</div> <div style="cursor:auto">auto</div> <div style="cursor:default">default</div> <div style="cursor:none">none</div> <div style="cursor:context-menu">context-menu</div> <div style="cursor:help">help</div> <div style="cursor:pointer">pointer</div> <div style="cursor:progress">progress</div> <div style="cursor:wait">wait</div> <div style="cursor:cell">cell</div> <div style="cursor:crosshair">crosshair</div> <div style="cursor:text">text</div> <div style="cursor:vertical-text">vertical-text</div> <div style="cursor:alias">alias</div> <div style="cursor:copy">copy</div> <div style="cursor:move">move</div> <div style="cursor:no-drop">no-drop</div> <div style="cursor:not-allowed">not-allowed</div> <div style="cursor:grab">grab</div> <div style="cursor:grabbing">grabbing</div> <div style="cursor:e-resize">e-resize</div> <div style="cursor:n-resize">n-resize</div> <div style="cursor:ne-resize">ne-resize</div> <div style="cursor:nw-resize">nw-resize</div> <div style="cursor:s-resize">s-resize</div> <div style="cursor:se-resize">se-resize</div> <div style="cursor:sw-resize">sw-resize</div> <div style="cursor:w-resize">w-resize</div> <div style="cursor:ew-resize">ew-resize</div> <div style="cursor:ns-resize">ns-resize</div> <div style="cursor:nesw-resize">nesw-resize</div> <div style="cursor:nwse-resize">nwse-resize</div> <div style="cursor:col-resize">col-resize</div> <div style="cursor:row-resize">row-resize</div> <div style="cursor:all-scroll">all-scroll</div> <div style="cursor:zoom-in">zoom-in</div> <div style="cursor:zoom-out">zoom-out</div>