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)1 -webkit- 314

27

1.5 -moz-

なし あり4 -webkit-
url()1121.546 ?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 22 added Windows support.

4. Firefox 4 added macOS support.

関連情報

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

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