Question

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

@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了解有关标签的更多信息

Answer 2

它是一个适合我的scss代码：

  label{
    margin-bottom:0;
    position:relative;
    &:before {
      content: '\f096 ';
      font-family: FontAwesome;
      font-size: 16px;
      margin-right: 5px;
      color: #303030;
    }
  }
  input:checked + label{
    &:before {
      content: '\f046 ';
    }
  }

CSS3 Fontawesome复选框点击事件

2 个答案: