html - CSS3 Fontawesome 复选框点击事件

Question

我一直在寻找一个基于纯 CSS 的复选框解决方案，并遇到了以下 codepen 代码 -

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

/*** basic styles ***/

body { margin: 30px; } 
h1 { font-size: 1.5em; }
label { font-size: 24px; }
div { 
  width: 175px; 
  margin-left: 20px;
}

/*** custom checkboxes ***/

input[type=checkbox] { display:none; } /* to hide the checkbox itself */
input[type=checkbox] + label:before {
  font-family: FontAwesome;
  display: inline-block;
}

input[type=checkbox] + label:before { content: "\f096"; 
letter-spacing: 10px;
} /* unchecked icon */


input[type=checkbox]:checked + label:before { content: "\f046";
letter-spacing: 5px;
} /* checked icon */

问题是我无法选中/取消选中，复选框上的单击事件不会更改复选框样式。在样式中它隐藏了复选框(显示设置为无)，检查事件在其中如何工作？

当我将复选框显示设置为阻止和选中/取消选中时，它会更改样式。

Answer 1

您不能通过单击复选框来选中/取消选中，在这种情况下，您可以通过单击标签来完成。在 CSS/HTML 中，标签基本上是它链接到的任何输入的扩展。因此，就您的浏览器而言，单击标签(您的图标)与切换复选框是一样的。

See here有关标签的更多信息