更改复选框指针 html

Question

我是 html 和 css 的新手。目前我有一个复选框：

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

当我将鼠标悬停在复选框上时，我需要一个手形图标。

我怎样才能做到这一点？

Answer 1

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

首先，在您的复选框中添加一个 ID 或 class。

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

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

#chkBike{
  cursor: pointer;
}

Answer 2

使用CSS游标属性，见here参考：

 input { cursor: pointer }

Answer 3

使用cursor:pointer你可以做到这一点

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

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

Answer 4

试试这个：

input
{
  cursor:pointer
  }

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

Answer 5

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

Answer 6

您可以使用样式属性来做到这一点

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

Answer 7

我想你想要这样：-

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

Answer 8

为相应的输入设置一个id

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

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

#vehicleId:hover{cursor:pointer};

Answer 9

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

对于那些使用自定义引导程序复选框的用户，您可以使用：

.checkbox-pointer .custom-control-label::before, 
.checkbox-pointer .custom-control-label::after {
  cursor: pointer;
}

Change pointer for checkbox html