自定义 Bootstrap 复选框的悬停效果

Posted 2023-03-05

【中文标题】自定义 Bootstrap 复选框的悬停效果

【英文标题】：Customize hover effect for Bootstrap checkbox

【发布时间】：2022-01-21 01:11:41

【问题描述】：

从this 回答开始，我试图避免在 Bootstrap 复选框上出现悬停效果，该复选框看起来像一个按钮：

<input type="checkbox" class="btn-check" id="btn-enable-cromo" autocomplete="off" checked>
<label class="btn btn-outline-success btn-sq-responsive" for="btn-enable-cromo"><img src="images/Cromo.svg" /></label>

在 CSS 中：

.btn-check:hover,
.btn-sq-responsive:hover 
    color: transparent;

我需要这个，因为在桌面或移动环境中，当您单击（或点击）复选框时，您不会看到任何内容，直到您单击（或点击）其他地方。悬停颜色与选中的颜色相同，因此您没有任何反馈。

相反，我的目标是立即显示复选框的实际状态。

上面的代码没有任何改变：行为是一样的。 我正在使用 Bootstrap v5.1.3。

【问题讨论】：

你是这个意思吗？ color: transparent !important;

@masterguru 没有区别。我在调试器中看到transparent 颜色应用于两个类的:hover 属性，但如果我将鼠标移到按钮上，它的颜色仍会变为绿色（success）

你是这个意思吗？检查这个link 是否也与背景颜色相关？

@masterguru 您的解决方案仅在未选中该复选框时才有效。但是当它被选中时，将鼠标悬停会导致背景变为白色......它只是反转了行为！

这有点令人困惑，我认为这是因为 transparent 颜色...尝试将其替换为其他颜色，因为您使用的是概述类，而 transparent 看起来与他们的背景。尝试使用red 或gray 颜色来确定您是否悬停在复选框按钮上。

【参考方案1】：

您需要“创建”一个自定义复选框。 我发现有一篇小文章实际上向您展示了如何操作，并且它有一个复制粘贴示例，您可以根据自己的需要进行调整。

Article on how to change the 'standard' checkbox styles.

问题似乎是浏览器在浏览器中嵌入了自己的默认样式。想想滚动条和一些表单元素（下拉菜单、选择、复选框和单选按钮等）。

编辑： 在这个 *** 页面上有更多有用的信息，包括解释：How to style a checkbox using CSS

【讨论】：

请注意 newbedev 是一个 Stack Overflow 刮板；不要链接到它。相反，谷歌搜索文本或标题（可选site:***.com）并找到正确的现场链接，而不是为抓取工具提供更多他们不应该获得的流量。在这种情况下，newbedev 页面似乎抄袭了两个不同的 SO 页面，但我正在努力寻找第二个页面。抓取工具完全主导了特定的搜索。