更改复选框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

使用pointer CSS样式将默认光标更改为指针。

首先，在您的复选框中添加ID或类。

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

在CSS中，使用以下样式。

#chkBike{
  cursor: pointer;
}

Answer 3

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

Answer 4

你可以使用样式属性，如下面的代码

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我有一辆自行车

Answer 5

试试这个：

＆＃13;

＆＃13;

input
{
  cursor:pointer
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 6

我想你想要这样： -

label, input[type="checkbox"] {
    cursor: pointer;
}
<label><input type="checkbox" name="vehicle" value="Bike"> I have a bike</label>

Answer 7

任何人都使用<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 8

使用CSS cursor属性，参见here参考：

 input { cursor: pointer }

Answer 9

将ID设置为相应的输入

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

并在悬停时应用样式css cursor: pointer 如下所示

#vehicleId:hover{cursor:pointer};