Change pointer for checkbox html

Question

I am new to html and css. Currently I have a checkbox:

<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>

When I hover over the checkbox, I need a hand icon.

How can I achieve this?

Answer 1

Using cursor:pointer you can achieve this

input[type="checkbox"] {
    cursor: pointer;
}

<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>

Answer 2

You use the pointer CSS style to change the default cursor to a pointer hand.

First, add an ID or class to your checkbox.

<input id="chkBike" type="checkbox" name="vehicle" value="Bike">I have a bike<br>

And in your CSS, use the following style.

#chkBike{
  cursor: pointer;
}