更改复选框html的指针

Posted 2023-03-05

技术标签:

【中文标题】更改复选框html的指针【英文标题】：Change pointer for checkbox html 【发布时间】：2017-05-27 15:14:42 【问题描述】：

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

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

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

我怎样才能做到这一点？

【问题讨论】：

你的意思是当悬停输入时你想要一个自定义图像光标？ 【参考方案1】：

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

&lt;input type="checkbox" name="vehicle" value="Bike" style="cursor:pointer"/&gt;I have a bike&lt;br&gt;

【讨论】：

【参考方案2】：

对于那些使用自定义 boostrap 复选框的用户，您可以使用：

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

【讨论】：

【参考方案3】：

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

【讨论】：

【参考方案4】：

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

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

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

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

#chkBike
  cursor: pointer;

【讨论】：

不需要单独的样式..这里永远不会看到默认光标。只需要：#chkBike cursor: pointer; 【参考方案5】：

为对应的输入设置一个id

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

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

#vehicleId:hovercursor:pointer;

【讨论】：

【参考方案6】：

我想你想要这样：-

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

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

【讨论】：

您可能希望将光标更改为提交和按钮：label, input[type="checkbox"], input[type=submit], input[type=button]【参考方案7】：

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

【讨论】：

【参考方案8】：

试试这个：

input

  cursor:pointer

&lt;input type="checkbox" name="vehicle" value="Bike"&gt;I have a bike&lt;br

【讨论】：

【参考方案9】：

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

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

&lt;input type="checkbox" name="vehicle" value="Bike"&gt;I have a bike&lt;br&gt;

【讨论】：

【参考方案10】：

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

 input  cursor: pointer

【讨论】：

以上是关于更改复选框html的指针的主要内容，如果未能解决你的问题，请参考以下文章