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
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4
補足
完全対応 4
補足
補足 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.
Opera 完全対応 7Safari 完全対応 1.2WebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
autoChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 7Safari 完全対応 1.2WebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
defaultChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 7Safari 完全対応 1.2WebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
inheritChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 8Opera 完全対応 9Safari 完全対応 1.2WebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
noneChrome 完全対応 5Edge 完全対応 12Firefox 完全対応 3IE 完全対応 9Opera 完全対応 15Safari 完全対応 5WebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
context-menuChrome 完全対応 1
補足
完全対応 1
補足
補足 This cursor is only supported on macOS and Linux.
Edge 完全対応 12Firefox 完全対応 1.5
補足
完全対応 1.5
補足
補足 This cursor is only supported on macOS and Linux.
IE 完全対応 10Opera 完全対応 10.6Safari 完全対応 3WebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
helpChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 7Safari 完全対応 1.2WebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
pointerChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 6Opera 完全対応 7Safari 完全対応 1.2WebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
progressChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 6Opera 完全対応 7Safari 完全対応 1.2WebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
waitChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 7Safari 完全対応 1.2WebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
cellChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 10Opera 完全対応 10.6Safari 完全対応 3WebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
crosshairChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 7Safari 完全対応 1.2WebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
textChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 7Safari 完全対応 1.2WebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
vertical-textChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 未対応 なしOpera 完全対応 10.6Safari 完全対応 3WebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
aliasChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 10Opera 完全対応 10.6Safari 完全対応 3WebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
copyChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 10Opera 完全対応 10.6Safari 完全対応 3WebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
moveChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 7Safari 完全対応 1.2WebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
no-dropChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 6Opera 完全対応 10.6Safari 完全対応 3WebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
not-allowedChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 6Opera 完全対応 10.6Safari 完全対応 3WebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
all-scrollChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 6Opera 完全対応 10.6Safari 完全対応 3WebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
col-resizeChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 6Opera 完全対応 10.6Safari 完全対応 3WebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
row-resizeChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 6Opera 完全対応 10.6Safari 完全対応 3WebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Unidirectional resize cursors (n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, and sw-resize)Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 7Safari 完全対応 1.2WebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Bidirectional resize cursors (ew-resize, nesw-resize, ns-resize, and nwse-resize)Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 10Opera 完全対応 10.6Safari 完全対応 3WebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Zoom cursors (zoom-in and zoom-out)Chrome 完全対応 37
完全対応 37
完全対応 1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12Firefox 完全対応 24
完全対応 24
完全対応 1
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 未対応 なしOpera 完全対応 24
完全対応 24
未対応 15 — 23
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 9
完全対応 9
完全対応 3
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Grab cursors (grab and grabbing)Chrome 完全対応 68
補足
完全対応 68
補足
補足 Chrome also continues to support the prefixed versions.
完全対応 1
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Chrome 22 added Windows support.
Edge 完全対応 14Firefox 完全対応 27
完全対応 27
完全対応 1.5
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 未対応 なしOpera 完全対応 ありSafari 完全対応 11
完全対応 11
完全対応 4
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
url()Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5
補足
完全対応 1.5
補足
補足 Firefox 4 added macOS support.
IE 完全対応 6Opera ? Safari 完全対応 3WebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
url() positioning syntax
実験的
Chrome 完全対応 ありEdge 未対応 なしFirefox 完全対応 ありIE 未対応 なしOpera ? Safari 完全対応 ありWebView Android 未対応 なしChrome Android ? Edge Mobile 未対応 なしFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

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

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