用于复选框的 FontAwesome

Question

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

我添加了字体-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

问题是，当您使用 display: none; 时，您实际上是在从 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;
}

如您所见，我只用 <label> 标签更改了您的 <span>。

有了这个，您完全可以做您正在寻找的事情，而无需使用 JavaScript 代码。

Fiddle

用于复选框的 FontAwesome

FontAwesome for checkbox

html

css

checkbox

font-awesome