CSScursor プロパティは、マウスポインターが対象となる要素上にある時のマウスカーソルを定義します。

構文

/* キーワード値 */
cursor: pointer;
cursor: auto;

/* URL とキーワードのフォールバック */
cursor: url(hand.cur), pointer;

/* URL と座標とキーワードのフォールバック */
cursor: url(cursor1.png) 4 12, auto;
cursor: url(cursor2.png) 2 2, pointer;

/* グローバル値 */
cursor: inherit;
cursor: initial;
cursor: unset;

cursor プロパティはゼロ個以上の <url> をコンマで区切ったものと、それに続く必須のキーワード値によって指定します。それぞれの <url> は画像ファイルを指します。ブラウザーは最初に指定された画像を読み込もうとし、ない場合は次にフォールバックして、いずれも画像が読み込めないとき(又は指定がなかった時)は、キーワード値にフォールバックします。

それぞれの <url> には二つの空白で区切った数値を続けることができ、 <x><y> 座標を表します。これは画像の左上隅からの相対位置で、カーソルのホットスポットを設定します。

例えば、これは <url> 値を使用して二つの画像を指定し、 <x><y> 座標を二つ目に設定し、どちらの画像も読み込めなかったときは progress キーワードにフォールバックするように指定しています。

cursor: url(one.svg), url(two.svg) 5 5, progress;

<url>
url(…) の形式か、又はコンマ区切りのリスト url(…), url(…), … で画像の URL を指定します。複数の <uri> の指定は、前候補の画像形式がサポートされていなかった場合のフォールバックとして機能します。リストの最後には、キーワード値の何れかを一つ以上指定しなければなりません。この指定がなければ、指定した url() 形式の記述は無効となります。詳細は cursor プロパティにおける URL 値の使用を参照して下さい。
<x> <y>
任意で x 座標と y 座標を指定します。二つの32未満の非負数で、単位なしです。
キーワード値

値の上にマウスを当てると、各項目の実際の表示を確認できます。

カテゴリ CSS 値 説明
一般 auto   現在のコンテキストに基づき表示するカーソルをユーザーエージェントが決定します。例えば、テキストにマウスオーバーした時には text キーワードを指定した場合と同様です。
default default.gif プラットフォームに依存する既定のカーソルです。ふつうは矢印です。
none   カーソルを表示しません。
リンク及び状態 context-menu context-menu.png コンテキストメニューが利用できることを示します。
help help.gif ヘルプが使用可能であることを示します。
pointer pointer.gif カーソルがリンクを示すポインターになります。ふつうは指差す手の画像です。
progress progress.gif バックグラウンドでプログラムがビジー状態dが、 (wait とは異なり) ユーザーがインターフェイスを操作可能であることを示します。
wait wait.gif プログラムがビジー状態で、 (progress とは異なり) ユーザーによる操作が不可能である状態を示します。よく砂時計や腕時計の画像が使われます。
選択 cell cell.gif 表のセルまたは一連のセルが選択できることを示します。
crosshair crosshair.gif 十字カーソルで、多くの場合はビットマップ内の選択を示すために使用されます。
text text.gif テキストを選択可能であることを示します。通常、 I ビームが表示されます。
vertical-text vertical-text.gif 縦書きのテキストを選択可能であることを示します。通常、水平の I ビームが表示されます。
ドラッグ&ドロップ alias alias.gif エイリアスやショートカットが作成されることを示します。
copy copy.gif 何かがコピーされることを示します。
move move.gif 何かが移動されることを示します。
no-drop no-drop.gif 現在の位置にアイテムがドロップできないことを示します。
バグ 275173: Windows 及び Mac OS X では、 no-dropnot-allowed と同じです。
not-allowed not-allowed.gif 要求された操作が受け付けられないことを示します。
grab grab.gif 何かがグラブ (移動のためにドラッグ) することができることを示します。
grabbing grabbing.gif 何かがグラブ (移動のためにドラッグ) されようとしていることを示します。
サイズ変更&スクロール all-scroll all-scroll.gif 何かが任意の方向にスクロール (パン) 可能であることを示します。
バグ 275174: Windows では、 all-scrollmove 同じです。
col-resize col-resize.gif アイテムや列が水平方向にサイズ変更可能であることを示します。通常、左右を指す矢印とそれを仕切る垂直線が表示されます。
row-resize row-resize.gif アイテムや行が垂直方向にサイズ変更可能であることを示します。通常、上下を指す矢印とそれを仕切る水平線が表示されます。
n-resize 上方向へのサイズ変更カーソルの例 辺が移動できることを表します。例えば、 se-resize のカーソルはボックスの南東 (south-east) の角から移動を開始した時に使われます。
環境によっては、等価の双方向のサイズ変更カーソルが表示されます。例えば、 n-resize 及び s-resizens-resize と同じです。
e-resize 右方向へのサイズ変更カーソルの例
s-resize 下方向へのサイズ変更カーソルの例
w-resize 左方向へのサイズ変更カーソルの例
ne-resize 右上方向へのサイズ変更カーソルの例
nw-resize 左上方向へのサイズ変更カーソルの例
se-resize 右下方向へのサイズ変更カーソルの例
sw-resize 左下方向へのサイズ変更カーソルの例
ew-resize 3-resize.gif 双方向へのサイズ変更が可能であることを示します。
ns-resize 6-resize.gif
nesw-resize 1-resize.gif
nwse-resize 4-resize.gif
拡大/縮小 zoom-in zoom-in.gif

拡大/縮小が可能であることを示す

zoom-out zoom-out.gif

形式文法

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

.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
} 

/* URL を使用する場合は、フォールバックのキーワード値が必要です。 */
.baz {
  cursor: url("hyper.cur"), auto;
}

仕様書

仕様書 状態 備考
CSS Basic User Interface Module Level 3
cursor の定義
勧告 幾つかのキーワード、ポジション構文、 url() 関数形式の追加
CSS Level 2 (Revision 1)
cursor の定義
勧告 初回定義

初期値auto
適用対象すべての要素
継承あり
メディア一括指定の各プロパティとして
  • visual: DB に値が見つかりません!
  • interactive: DB に値が見つかりません!
計算値as specified, but with url values made absolute
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応11214171.2
auto1121471.2
default1121471.2
inherit1121891.2
none51239155
context-menu12121.521010.63
help1121471.2
pointer1121671.2
progress1121671.2
wait1121471.2
cell1121.51010.63
crosshair1121471.2
text1121471.2
vertical-text1121.5 なし10.63
alias1121.51010.63
copy1121.51010.63
move1121471.2
no-drop1121.5610.63
not-allowed1121.5610.63
all-scroll1121.5610.63
col-resize1121.5610.63
row-resize1121.5610.63
Unidirectional resize cursors (n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, and sw-resize)1121471.2
Bidirectional resize cursors (ew-resize, nesw-resize, ns-resize, and nwse-resize)1121.51010.63
Zoom cursors (zoom-in and zoom-out)

37

1 -webkit-

12

24

1 -moz-

なし

24

15 — 23 -webkit-

9

3 -webkit-

Grab cursors (grab and grabbing)

683

1 -webkit- 4

14

27

1.5 -moz-

なし あり

11

4 -webkit-

url()1121.556 ?3
url() positioning syntax あり なし あり なし ? あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 なし ? あり ? ? ? ?
auto なし ? あり ? ? ? ?
default なし ? あり ? ? ? ?
inherit なし ? あり ? ? ? ?
none なし ? あり ? ? ? ?
context-menu なし ? あり ? ? ? ?
help なし ? あり ? ? ? ?
pointer なし ? あり ? ? ? ?
progress なし ? あり ? ? ? ?
wait なし ? あり ? ? ? ?
cell なし ? あり ? ? ? ?
crosshair なし ? あり ? ? ? ?
text なし ? あり ? ? ? ?
vertical-text なし ? あり ? ? ? ?
alias なし ? あり ? ? ? ?
copy なし ? あり ? ? ? ?
move なし ? あり ? ? ? ?
no-drop なし ? あり ? ? ? ?
not-allowed なし ? あり ? ? ? ?
all-scroll なし ? あり ? ? ? ?
col-resize なし ? あり ? ? ? ?
row-resize なし ? あり ? ? ? ?
Unidirectional resize cursors (n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, and sw-resize) なし ? あり ? ? ? ?
Bidirectional resize cursors (ew-resize, nesw-resize, ns-resize, and nwse-resize) なし ? あり ? ? ? ?
Zoom cursors (zoom-in and zoom-out) なし ? あり ? ? ? ?
Grab cursors (grab and grabbing) なし ? あり ? ? ? ?
url() なし ? あり ? ? ? ?
url() positioning syntax なし ? なし ? ? ? ?

1. In Internet Explorer 11, when cursor is applied to an element and this element is underneath an open <select> menu and the user hovers over a <select> menu item that's on top of said element, the cursor for said element will be displayed rather than the <select>'s normal cursor. See bug 817822.

2. This cursor is only supported on macOS and Linux.

3. Chrome also continues to support the prefixed versions.

4. Chrome 22 added Windows support.

5. Firefox 4 added macOS support.

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, SphinxKnight, takahashim, umamama, mrstork, Sebastianz, ethertank
最終更新者: mfuji09,