【cursor】マウスカーソルの形状を指定

cursorプロパティでは、指定した要素の上に移動した時のマウスなどのポインティングデバイスのカーソル(マウスカーソル)の形状を設定することができます。

また自作カーソルを使用する場合、ファイルの形式は「.cur」(カーソルファイル)、または「.ani」(アニメーションカーソルファイル)にします。 ただしInternet Explorerの場合、バージョン6.0~8.0では自作カーソルに対応していましたが、Internet Explorer9.0以降からは未対応となっています。

書式

  • cursor : ……… カーソルの形状を指定する

★:キーワード(下記参照)、url(URL)、inherit

表示例 説明
none カーソルを表示しない
auto ブラウザが状況に応じて自動的にカーソルを切り替えます
crosshair crosshair 十字型のクロスヘアカーソルにします。
default default その環境での標準的なカーソルにします。(一般的には矢印)
pointer pointer リンクを示す形状にします。
move move 対象が移動可能な事を示す形状にします
text text テキストが選択できる事を示す形状にします。(一般的には「|」型)
wait wait 待機・処理中である事を示す形状にします。(砂時計や腕時計の形)
help help ヘルプが利用できることを示す形状にします。(「?」や「バルーン」の形)
e-resize e-resize 右(東)方向にリサイズできる事を示す形状
ne-resize ne-resize 右上(北東)方向にリサイズできる事を示す形状
nw-resize nw-resize 左上(北西)方向にリサイズできる事を示す形状
n-resize n-resize 上(北)方向にリサイズできる事を示す形状
se-resize se-resize 右下(南東)方向にリサイズできる事を示す形状
sw-resize sw-resize 左下(南西)方向にリサイズできる事を示す形状
s-resize s-resize 下(南)方向にリサイズできる事を示す形状
w-resize w-resize 左(西)方向にリサイズできる事を示す形状
ew-resize ew-resize 左右(東西)方向にリサイズできる事を示す形状
ns-resize ns-resize 上下(南北)方向にリサイズできる事を示す形状
nesw-resize nesw-resize 右上(北東)-上下(南西)方向にリサイズできる事を示す形状
nwse-resize nwse-resize 左上(北西)-右下(南東)方向にリサイズできる事を示す形状
url() 画像ファイルのurlを指定し、任意のカーソルを表示します。またカンマ「,」で区切る事で複数の候補を並べる事もできます。この場合、ユーザーの環境で利用可能であれば、前に指定したものから順に使用されます。なお指定したファイルが全て表示できない場合の最終的な選択肢として、上記カーソルのキーワードの中から一つ指定しておく必要があります(最後にカンマ「,」で区切ってキーワードを指定)。
※最後にキーワードを指定しない場合、この値は適用されません。
all-scroll all-scroll 上下左右にスクロールできる事を示す形状
col-resize col-resize 左右にリサイズできる事を示す形状
row-resize row-resize 上下にリサイズできる事を示す形状
no-drop no-drop ドラッグした内容がドロップできない事を示す形状
not-allowed not-allowed 動作が実行できない事を示す形状
progress progress バックグラウンドで処理が進行中である事を示す形状
vertical-text vertical-text 縦書きテキストを選択できる事を示す形状
context-menu context-menu コンテキストメニューが利用可能である事を示す形状
cell cell セルが選択できる事を示す形状
alias alias エイリアスやショートカットが作成される事を示す形状
copy copy コピーが可能である事を示す形状
zoom-in zoom-in ズームインが可能である事を示す形状
zoom-out zoom-out ズームアウトが可能である事を示す形状

上記の表示例はInternet Explorerの場合です。ブラウザによって表示が異なります。

使用した時の例

.sample1 {cursor: none;}
.sample2 {cursor: auto;}
.sample3 {cursor: crosshair;}
.sample4 {cursor: default;}
.sample5 {cursor: pointer;}
.sample6 {cursor: move;}
.sample7 {cursor: text;}
.sample8 {cursor: wait;}
.sample9 {cursor: help;}
.sample10 {cursor: e-resize;}
.sample11 {cursor: ne-resize;}
.sample12 {cursor: nw-resize;}
.sample13 {cursor: n-resize;}
.sample14 {cursor: se-resize;}
.sample15 {cursor: sw-resize;}
.sample16 {cursor: s-resize;}
.sample17 {cursor: w-resize;}
.sample18 {cursor: ew-resize;}
.sample19 {cursor: ns-resize;}
.sample20 {cursor: nesw-resize;}
.sample21 {cursor: nwse-resize;}
.sample22 {cursor: url("image.cur"),auto;}
.sample23 {cursor: all-scroll;}
.sample24 {cursor: col-resize;}
.sample25 {cursor: row-resize;}
.sample26 {cursor: no-drop;}
.sample27 {cursor: not-allowed;}
.sample28 {cursor: progress;}
.sample29 {cursor: vertical-text;}
.sample30 {cursor: context-menu;}
.sample31 {cursor: cell;}
.sample32 {cursor: alias;}
.sample33 {cursor: copy;}
.sample34 {cursor: zoom-in;}
.sample35 {cursor: zoom-out;}
<div class="sample1">none</div>
<div class="sample2">auto</div>
<div class="sample3">crosshair</div>
<div class="sample4">default</div>
<div class="sample5">pointer</div>
<div class="sample6">move</div>
<div class="sample7">text</div>
<div class="sample8">wait</div>
<div class="sample9">help</div>
<div class="sample10">e-resize</div>
<div class="sample11">ne-resize</div>
<div class="sample12">nw-resize</div>
<div class="sample13">n-resize</div>
<div class="sample14">se-resize</div>
<div class="sample15">sw-resize</div>
<div class="sample16">s-resize</div>
<div class="sample17">w-resize</div>
<div class="sample18">ew-resize</div>
<div class="sample19">ns-resize</div>
<div class="sample20">nesw-resize</div>
<div class="sample21">nwse-resize</div>
<div class="sample22">url()</div>
<div class="sample23">all-scroll</div>
<div class="sample24">col-resize</div>
<div class="sample25">row-resize</div>
<div class="sample26">no-drop</div>
<div class="sample27">not-allowed</div>
<div class="sample28">progress</div>
<div class="sample29">vertical-text</div>
<div class="sample30">context-menu</div>
<div class="sample31">cell</div>
<div class="sample32">alias</div>
<div class="sample33">copy</div>
<div class="sample34">zoom-in</div>
<div class="sample35">zoom-out</div>

ブラウザ上の表示例

none
auto
crosshair
default
pointer
move
text
wait
help
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
ew-resize
ns-resize
nesw-resize
nwse-resize
url()
all-scroll
col-resize
row-resize
no-drop
not-allowed
progress
vertical-text
context-menu
cell
alias
copy
zoom-in
zoom-out

対応ブラウザなどのデータ

カーソル形状別の対応状況
IE9 Ch12 Fx12 Op11 Sa5
none
crosshair
context-menu
cell
alias
copy
zoom-in
zoom-out

上記は未対応のブラウザがあるカーソル形状のみを記載しています。またカーソル画像をurlで表示する場合、IE9 は「.ani」「.cur」、Fx12・Ch12・Sa5 は「.cur」「.gif」「.png」「.jpg」「.bmp」、Op11は未対応となっています。
※IE=Internet Explorer、Ch=Google Chrome、Fx=Firefox、Op=Opera、Sa=Safari

初期値 auto 値の継承 継承する
適用可能な要素 すべての要素
メディア visual / UI
対応ブラウザ Internet Explorer5.5~ , Google Chrome1~ , Firefox1~ , Opera7~ , Safari1.2~