带有空白标签的Font Awesome CSS复选框

Question

我正在尝试使用FontAwesome获得仅CSS单选和复选框按钮。我在这里有一个jsfiddle。

当复选框具有包含内容的标签时，我正在使用以下效果很好的CSS。我现在正尝试在页面上的表格中创建复选框矩阵，并且图标显示为OK，但无法单击/更改状态。

我的CSS：

/**
 * Checkboxes
 */


input[type=checkbox] {
  display: none;
}


/* to hide the checkbox itself */

input[type=checkbox] + label:before {
  display: inline-block;
  letter-spacing: 5px;
  content: "\f0c8";
  font-family: 'Font Awesome 5 Pro';
}


/* unchecked icon */

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


/**
 * Radio buttons
 */

input[type=radio] {
  display: none;
}


/* to hide the radio itself */

input[type=radio] + label:before {
  display: inline-block;
  letter-spacing: 5px;
  content: "\f111";
  font-family: 'Font Awesome 5 Pro';
}


/* unchecked icon */

input[type=radio]:checked + label:before {
  content: "\f192";
  letter-spacing: 5px;
}

input[type=checkbox] + label:hover,
input[type=radio] + label:hover {
  cursor: pointer;
}

我的HTML：

<div>
  <i class="fas fa-square"></i> SAMPLE UNCHECKED
  <br/>
  <i class="fas fa-check-square"></i> SAMPLE CHECKED
  <br/>
  <br/>
  <br/>
  <input name="access_chk[]" class="access_chk" type="checkbox" checked>
  <label for="access_chk[]"></label>
  <br/>
  <input name="access_chk[]" class="access_chk" type="checkbox" checked>
  <label for="access_chk[]"></label>
  <br/>
  <input name="access_chk[]" class="access_chk" type="checkbox" checked>
  <label for="access_chk[]"></label>
</div>

Answer 1

这是一个可能的解决方案：由于标签还是空的，为什么要使用它们（除非您有一些隐藏的screenreader属性，否则永远不需要空标签）。

诀窍是在复选框本身而不是标签上使用伪元素。要使复选框起作用，请visbility:hidden在其上以及visibility:visible在伪元素上使用。

较小的缺点：您必须在字体大小上稍作改动，否则字形可能会显得太小。

input[type=checkbox] {
  visibility:hidden;
}

input[type=checkbox]::before {
  visibility: visible;
  font-size:16px;
  display: inline-block;
  letter-spacing: 5px;
  content: "\f0c8";
  font-family: 'Font Awesome 5 Free';
}

input[type=checkbox]:checked::before {
  content: "\f14a";
  letter-spacing: 5px;
  font-family: 'Font Awesome 5 Free';
}

<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">
<div>
  <input type="checkbox" checked>
  <br/>
  <input type="checkbox" checked>
  <br/>
  <input type="checkbox" checked>
</div>