Change pointer for checkbox html

Solution 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>

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

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>