CSS の[cursor]プロパティで、マウスカーソルの形状を変更する方法を紹介します。

通常「cursor」プロパティには以下の値を指定できます。

  • auto
  • default
  • pointer
  • crosshair
  • move
  • text
  • wait
  • help
  • n-resize
  • e-resize
  • s-resize
  • w-resize
  • ne-resize
  • se-resize
  • nw-resize
  • sw-resize
  • url

また、独自拡張となりますが以下の値を指定することもできます。
この場合、古いブラウザでは対応していないことが多いです。

  • col-resize
  • row-resize
  • all-scroll
  • not-allowed
  • no-drop
  • progress
  • vertical-text

cursor:url; を指定する場合は、任意の画像をカーソルとして使用することができます。

.sample {cursor:url(cursor.cur);}

カーソルに使用できる画像ファイルの形式は、IEの場合はカーソル(.cur)とアニメーションカーソル(.ani)のみ。Firefoxの場合はGIFやJPEG、PNGなども使用できるようです。
こちらは対応するブラウザが少ないので使用する際は注意が必要ですね。

下記ページにデモを用意したので合わせてご確認ください。

CSS[cursor]:サンプル

参考サイト

こちらは参考サイト。
その名のとおりのウェブサイト「CSS Cursor」では、各ブラウザ毎にどのように「Cursor」が適用されるのかを一目で確認できるので大変便利です。

CSS Cursor : http://css-cursor.techstream.org