【CSS】cursor一覧とinputでの使い方

inputのラジオボタンやlabelはマウスを乗せても指のアイコンになりません。クリックできることがわかるようにアイコンを変えたいですね。

CSSのcursorは特定の範囲内に乗ったマウスカーソルのアイコンを変更することができます。

また、cursorで指定できるアイコンは多数用意されています。

cursor一覧とラジオボタンなどのinputやlabelでの使い方を紹介します。

カーソル(cursor)一覧

「cursor:○○」と指定します。

○○にあたる値と実際のアイコンの一覧は下記のとおりです。

default	none	pointer	progress	wait
alias	copy	help	cell	crosshair
text	vertical-text	col-resize	row-resize
move	all-scroll IEの場合	not-allowed	no-drop IEの場合
n-resize	s-resize	ns-resize	e-resize	w-resize	ew-resize
nw-resize	se-resize	nwse-resize	ne-resize	sw-resize	nesw-resize
zoom-in IE不可	zoom-out IE不可	grab IE不可	grabbing IE不可

カーソルのアイコンはブラウザやバージョンによって異なる場合があります。

Chrome、Edge、Firefoxは同じです。IE11はマークが異なったり使えないものがあります。

「resize」シリーズは3つ同じマークになっています。（昔は違ったのかもしれません。）

inputでのcursorの使い方

cursorにおいてよく使うのは「cursor:pointer」です。

というかサイト作成においてpointer以外のcursorはほぼ使いません。

pointerは人差し指のアイコンであり、クリックできることを示すことができます。

aタグは標準でこのアイコンになりますが、label、input、buttonタグなどはこのアイコンにはならないためCSSで指定する必要があります。

下記はinputタグに「cursor: pointer」を指定した例です。

<style>
.example2{
    cursor: pointer;
}
</style>
<input type="checkbox" class="example2"> <label>選択肢</label>

カーソルを乗せたときに動作するので「:hover」が必要に思いがちですが、実はいりません。

これでもいいのですが、クリック範囲が非常に狭く押しづらいですね。

もう一工夫してラベルもクリックできるようにしましょう。

<style>
.example3,.example3 + label{
    cursor: pointer;
}
</style>
<input type="checkbox" class="example3" id="example3"> <label for="example3">選択肢</label>

idとforでinputとlabelを結びlabelを押してもinputが反応するようしました。

さらにlabelにも「cursor: pointer」を指定しクリックできることを示しました。

しかし、inputとlabelの間の隙間はクリックできません。ここもクリックできるようにしましょう。

<style>
.example4,.example4 input{
    cursor: pointer;
}
</style>
<label class="example4"><input type="checkbox"> 選択肢</label>

ラベルとinputと隙間をlabelで囲んでしまいます。こうするとlabel内のどこをクリックしてもinputが反応します。

おまけにidとforで結ぶ手間もなくなります。

labelには「cursor: pointer」を指定してクリックできることを示しています。

inputはlabelの中にありますが「cursor: pointer」を指定する必要があります。

さらにもう一手間かけてクリック範囲を広げましょう。

<style>
.example5{
    cursor: pointer;
    display: inline-block;
    padding: 10px;
}
.example5:hover{
    text-decoration: underline;
}
.example5 input{
    cursor: pointer;
    margin-right: 5px;
}
</style>
<label class="example5"><input type="checkbox">選択肢</label>

labelに「display: inline-block」を指定しpaddingが効くようにしてからpaddingを指定してクリック範囲を広げています。

マウスの変化だけではなく、さらにlabelのhover時に下線が表示されるようにしました。

このときスペースにも下線が引かれてしまうためmarginの隙間に変更しています。

このようにしてクリックしやすく、視覚的にもクリックできることを示すようにしましょう。

cursorの注意点（スマホでは効かない）

cursorはマウスのアイコンを変更できます。

しかしスマホやタブレットなどマウスカーソルがない端末では当然無意味です。

「マウスカーソルを乗せればクリックできるかどうかわかる」と思ってはいけません。

クリックできるものは見た目だけで「クリックできそう」と判断できるようにしましょう。

逆にクリックできないものを「クリックできそう」と勘違いさせないことも重要です。

まとめ

よく使うのは「cursor: pointer」。というかpointerしか使わない。

hoverは不要で、マウスを乗せたとき変化させたい箇所に指定する。

スマホのことを考え、見ただけでクリックできそうに見せることが重要。

以上、cursor一覧とinputでの使い方でした。