label要素の子要素に display プロパティを設定するとIEでカーソルが変わることがある

投稿

label要素を使うと、大抵のブラウザではマウスカーソルが default（矢印）になります。ところがIEのみ、子要素の display プロパティによっては text（I型）になることがあります[1]。

たとえばこんなケースです。

<label><span style="display:inline-block;">ラベル</span></label>

CSS 2.1で定義(W3C)されている16の値のうち、noneなど表示されないものを除いた13種類でテストしてみたところ、以下の7つの場合にスタイルが変わりました。

  • block
  • list-item
  • inline-block
  • table
  • inline-table
  • table-cell
  • table-caption
  • なお、IE6, 7 は inline-block のみスタイルが変わるようです。

IEでも表示を統一したい場合は、スタイルシートで label { cursor: default; } と指定すればOKです。

脚注