ボタンやセレクトのカーソルは pointer でよくなる（appearance: base の既定カーソル）

どんな時に使う？

• 長年「ボタンに cursor: pointer を付けるべきか（OS のボタンは矢印のまま）」で揺れていたデザインシステムやリセット CSS の方針を決めたいとき。
• カスタマイズ可能な <select>（appearance: base-select）など、新しい base 外観のフォーム部品を使い始めるとき。

議論では、調べた多くのデザインシステムがボタンに pointer を付けていたことが根拠になった。整理された意味は「pointer はクリックするもの、テキストカーソルは文字入力、つかむ手はドラッグ」。

コード（決議されたルールに沿ったリセット例）

select, option,
input:is([type=checkbox], [type=radio], [type=button], [type=submit], [type=reset], [type=color], [type=image]),
button, ::file-selector-button {
  cursor: pointer;
}

input[type=range] { cursor: grab; }
input[type=range]:active { cursor: grabbing; }

:is(select, input, textarea, button, option):disabled,
:disabled::file-selector-button {
  cursor: not-allowed;
}

select[readonly], optgroup,
input[readonly], textarea[readonly] {
  cursor: default;
}

上は CSSWG の issue に載った案（fantasai さんのコメント）を少しまとめ直したもの。

注意点・対応状況

• 決まったのは appearance: base 側の UA スタイル（css-forms-1 の仕様）。従来の appearance: auto のボタンが既定で pointer になるわけではない。今のブラウザで同じ挙動にしたいなら、上のように自分で書く。
• 9 月の議論では一度「cursor: default」で決議され、その後 10/21 に pointer を含む上のルールで決議し直された。仕様の文面に入るまでは細部が変わる可能性がある。
• not-allowed はドラッグ＆ドロップの「ここには置けない」にも使われる、という指摘も議論中に出ている。

出典

• @sanyampunia（2026-11-03）
• @jh3yy、@_yuheiy も同じ話題に言及
• CSSWG issue #14251「Cursors for base appearance」