cursor

Updated / Published

cursorプロパティはカーソル（ポインタ）の形状を指定することができます。要素の内容領域にカーソルが入った時に、表示するカーソルの形状を指定します。表示される形状は、Windows や Macintosh といったプラットフォーム（OS）、またはユーザの環境設定によって異なります。

値
  • auto
  • crosshair
  • default
  • pointer
  • move
  • e-resize
  • ne-resize
  • nw-resize
  • n-resize
  • se-resize
  • sw-resize
  • s-resize
  • w-resize
  • text
  • wait
  • progress
  • help
  • <URI>
  • inherit
初期値
auto
適用対象
すべての要素
継承
する
メディア
  • visual
  • interactive

cursorプロパティの値

cursorプロパティに指定できる値はそれぞれ以下の意味を示します。各キーワード部分にカーソルが合わさると、指定のキーワードに形状が変更されます。UA によっては対応していないものもあります（詳しくは実装状況を参照ください）。

auto
状況に応じて、UA が自動選択
crosshair
十字線
default
デフォルト
Windows：矢印の形
Macintosh：リンクボタン用（pointer の形状）
pointer
リンクボタン用
move
移動可能対象
e-resize
右辺移動
ne-resize
右上隅移動
nw-resize
左上隅移動
n-resize
上辺移動
se-resize
右下隅移動
sw-resize
左下隅移動
s-resize
下辺移動
w-resize
左辺移動
text
テキスト選択（I の形）
wait
待機中（時計や砂時計）
progress
砂時計
help
ヘルプ利用時（疑問符やバルーンなど）
<URI>
指定された URI の画像を表示（サンプル参照）
cursor : url(URI,キーワード) ; の形で、括弧内に画像の所在となる URI に続いてコンマ（,）で区切って、画像表示に対応できなかった場合のためのカーソルの形状を指定するキーワードを1つ指定します。

cursorプロパティの実装状況

IE
◯：IE8よりinheritをサポート
Firefox
◯
Opera
◯：旧Presto版Operaは<URI> の画像表示を未サポート、Blink版Operaよりサポート
Chrome
◯
Safari
◯
iOS
無効：カーソルに形状が存在しません
Android
無効：カーソルに形状が存在しません

サンプル

.img_cursor { cursor : url(image.cur), text ; }

カーソルにオリジナルの画像を使いたい場合は、アイコン作成専用のソフトウェアなどを利用して、アイコンに関するヘッダ情報をもった専用画像フォーマット（CUR）に加工する必要があります。