Question

我正在尝试使用FontAwesome作为复选框 - 因此在未选中状态下 - 它将显示Trash图标，并且在选中状态下，它将显示相同的图标，但为红色。

我添加了font-awesome.min.css和字体。

HTML：

<div class="delete-checkbox">
   <input type="checkbox" id="checkbox-delete-6053923167078">
   <span></span>
</div>

CSS：

.delete-checkbox input[type="checkbox"] {
    display: none;
}

.delete-checkbox span:before {
    font-family: "FontAwesome";
    font-style: normal;
    width: 1em;
    height: 1em;
    content: '\f014';
    margin-right: .3em;
}

.delete-checkbox input[type="checkbox"]:checked ~ span:before {
    color: red;
}

我在结果中看到了垃圾桶图标，但是，它不可点击，当我点击它时，它不会变成红色。

我该怎么做？

Answer 1

试试这个：

http://jsbin.com/sanoya/edit?html,css,output

问题在于，当您使用{{1}}时，您实际上是从DOM中删除元素，因此该元素不可点击。

Answer 2

如果您愿意，可以使用JavaScript

将<span></span>替换为以下内容：

<span onclick="document.getElementById('checkbox-delete-6053923167078').checked = !document.getElementById('checkbox-delete-6053923167078').checked"></span>

或者，如果您使用的是jQuery，则可以使用：

<span onclick="$('#checkbox-delete-6053923167078').prop('checked', !$('#checkbox-delete-6053923167078').prop('checked'));"></span>

Answer 3

没有必要使用JavaScript来实现您正在寻找的东西。你的标记几乎没问题。您应该使用<label>标记，而不是<span>标记，并且您应该在CSS中使用<label>。这样做，你最终会得到像这样的标记

<div class="delete-checkbox">
  <input type="checkbox" id="checkbox-delete-6053923167078">
  <label for="checkbox-delete-6053923167078"></label>
</div>

和像这样的CSS

.delete-checkbox input[type="checkbox"] {
  display: none;
}

.delete-checkbox label:before {
  font-family: "FontAwesome";
  font-style: normal;
  width: 1em;
  height: 1em;
  content: '\f014';
  margin-right: .3em;
}

.delete-checkbox input[type="checkbox"]:checked ~ label:before {
  color: red;
}

如您所见，我仅使用<span>标记更改了您的<label>。

有了这个，您完全可以在不使用JavaScript代码的情况下完成您正在寻找的内容。

Fiddle

FontAwesome的复选框

3 个答案: