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)に加工する必要があります。

Updated / Published