更改复选框html的指针

Question

我是html和css的新手.目前我有一个复选框.请看下面的代码:

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

当我将鼠标悬停在复选框上时,我需要一个手形图标.我怎样才能实现这一目标？

Answer 1

使用cursor:pointer你可以实现这一目标

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

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

Answer 2

任何人都使用<label>标记。不知道为什么，但如果没有它，则cursor:pointer;仅适用于复选框，如果您单击文本，复选框不会更改状态。（我认为这很烦人）我的建议是使用标签

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>

Answer 3

您可以使用pointerCSS样式将默认光标更改为指针。

首先，将ID或类添加到您的复选框。

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

在您的CSS中，使用以下样式。

#chkBike{
  cursor: pointer;
}