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?

Solution 1

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;
}

Solution 2

Using cursor:pointer you can achieve this

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

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

Solution 3

Anyone use <label> markup. Don't know why, but without it the cursor:pointer; is only for the check square, and if you click on the text the checkbox doesn't change state.(and I think this is very annoying) My advice is to use label

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

<input type="checkbox" name="vehicle" value="Bike" id="vehicleId">
<label for="vehicleId">I have a bike</label>

Solution 4

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

Solution 5

You can do that using style attribute

<input type="checkbox" name="vehicle" value="Bike" style="cursor:pointer"/>I have a bike<br>

View more solutions

Comments

[Brad Kent]

there is no need to have separate styles.. the default cursor will never be seen here. only needed: #chkBike { cursor: pointer; }

[Steve A]

And you may want to have the cursor change over submit and buttons: label, input[type="checkbox"], input[type=submit], input[type=button]