ホームへ

【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での使い方でした。

マンガで読める関連記事