使复选框看起来像一个按钮 CSS答案

【问题标题】：Make a checkbox look like a button CSS使复选框看起来像一个按钮 CSS
【发布时间】：2021-10-20 12:27:31
【问题描述】：

我认为我想要实现的目标可以用更简单的方式完成。但是我几乎没有 JS 经验，也没有 CSS 方面的经验。所以我正在使用预构建的 CSS 和 JS 代码并对其进行细微修改。所以我会解释我的最终目标，看看我目前拥有的是否可以接受。

网页上的顶部菜单，其中包含在视觉上看起来相同的按钮和复选框
我希望复选框看起来像按钮，例如没有复选框，只有标签。
考虑到它正在调用的 JS 代码，我希望复选框仍保留其作为复选框的功能
我通过按钮和复选框调用JS代码的方式是正确还是过于复杂？

<li><a title="Zoom to U.S" input type="button" name="US" onclick="US();"><span>Zoom to U.S.</span></a></li>  
<li><a title="Test 1 KML"><input type="checkbox" id="kml-red-check" name="kml-red-check" onclick="toggleKml("red");"><span>Test 1 KML</span></a></li>

【问题讨论】：

将复选框与标签配对，隐藏复选框并设置标签样式，使其看起来像一个按钮
每当我添加 '/** * Start by hiding the checkboxes */ input[type=checkbox] { visibility: hidden; } 它停止工作
我想补充一点，您通常不应该在复选框或单选按钮上使用onclick，因为这不包括其他切换方法（例如通过键盘或单击标签）。请改用onchange。这也可能是隐藏复选框时不起作用的原因。
我将onclick 更改为onchange，当我通过CSS 隐藏复选框时仍然显示相同的结果
在 a 标签中有输入元素是否有特定原因？

标签： javascript html css

【解决方案1】：

使用 CSS 彻底改变复选框的外观是不可能的。

不过，您可以做的是设置标签元素的样式，使其看起来像一个按钮。由于标签元素的性质，单击它将切换复选框的状态，从而保持您的功能不变。

这里是怎么做的

标记

<li>
    <label for="kml-red-check">I am a button!</label>
    <input type="checkbox" id="kml-red-check" name="kml-red-check" onchange="toggleKml("red");">
</li>

请注意，我已将 onclick 处理程序更改为 onchange，因为现在无法单击复选框本身。当您单击标签时，它的值会发生变化

样式

label[for="kml-red-check"]{
   //Your CSS goes that makes the label look like a button goes here
}
#kml-red-check{
    display:none;
}

【讨论】：

我正在使用的 CSS 已下载，如我的 JSFiddle 中所示。我认为条目代码使我不确定按钮。
在您的小提琴中，我没有看到您使用 for 字段的 for 属性。 for 需要包含要将标签链接到的复选框的id...
我在我的 WAMP 服务器上运行它并在那里进行更改，因为此代码与大量 JS 代码配对
查看这个工作示例：FIDDLE.这对你很有用
请仔细阅读答案中的示例。 for 属性在标签中是完全必要的，我在您的代码中的任何地方都看不到它。我就把它留在这里:)

【解决方案2】：

.hidden {
  position: absolute;
  visibility: hidden;
  opacity: 0;
}

input[type=checkbox]+label {
  color: #ccc;
  font-style: italic;
}

input[type=checkbox]:checked+label {
  color: #f00;
  font-style: normal;
}

<input type="checkbox" class="hidden" name="cb" id="cb">
<label for="cb">text</label>

http://css-tricks.com/almanac/selectors/c/checked/

但在 lt IE9 上无法使用。

编辑：在您的标记之后，它应该是这样的：

<ul>
<li><input id="cb1" name="cb1-name" type="checkbox" onkeypress="setTimeout('checkIt(\'cb1\')',100);"><label for="cb1" onclick="setTimeout('checkIt(\'cb1\')',100);">text 1</label></li>
<li><input id="cb2" name="cb2-name" type="checkbox" onkeypress="setTimeout('checkIt(\'cb2\')',100);"><label for="cb2" onclick="setTimeout('checkIt(\'cb2\')',100);">text 2</label></li>
</ul>

然后检查复选框是否在您的函数中被选中。 onchange / onclick in a checkbox doesn't work in IE

再次编辑：更改了 NAME 属性，因此您最终不会遇到问题。并为 IE8 中无响应但最终需要的 onchange 功能添加了一些解决方法。最终你应该在你的函数中添加一个计时器，而不是内联。

function checkIt(e){
    if(document.getElementById(e).checked){
    alert('checked');
    } else {
    alert('unchecked');
    }
}

【讨论】：

这对我有用。我不担心 IE9 版本，因为我正在为 IE9 及以下版本加载一个通用 CSS，谢谢。
@user2704746 哦，它可以在 IE9 中运行。只是在 IE9 之前没有任何版本。
我之前测试过，我看到它运行良好，并且您还通过添加颜色选项帮助了我。再次感谢

【解决方案3】：

<label>
  <input type="checkbox" ng-model="vm.abc" ng-change="vm.go()"/>
  <span>this is button add some css to lokking like a button</span>
</label>

这将像按钮一样工作，如果您不想显示复选框，请使用此

<label>
  <input type="checkbox" ng-model="vm.abc" ng-change=vm.go()" hidden=''/>
  <span>this is button add some css to lokking like a button</span>
</label>

在这里查看https://jsfiddle.net/h0ntpwqk/2/

【讨论】：