带有空标签的字体真棒 CSS 复选框 [重复]答案

【问题标题】：Font Awesome CSS checkbox with empty label [duplicate]带有空标签的字体真棒 CSS 复选框 [重复]
【发布时间】：2018-01-14 23:01:11
【问题描述】：

我正在尝试使用 FontAwesome 获取仅 CSS 的单选和复选框按钮。我有一个jsfiddle here。

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

我的 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>

【问题讨论】：

你有什么问题？
图标不能点击，因为你没有点击复选框，只是之前的伪元素。唯一可以设置复选框样式的方法是用 js 模拟事件
嗨@Julien Ambos，复选框/收音机无法使用FA。见小提琴。
@MarceloOrigoni 你确定吗？ jsfiddle.net/d0do7sff/19
我认为这不是对已标记问题的欺骗。标记的问题是关于填充/间距。这个问题是关于实际功能的。解决方案完全不同。

标签： jquery html css checkbox

【解决方案1】：

这是一个可能的解决方案：由于您的标签无论如何都是空的，为什么要使用它们（除非您有一些隐藏的屏幕阅读器属性，否则您不需要空标签......永远）。

诀窍是在复选框本身而不是标签上使用伪元素。要使复选框起作用，请在它们上使用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>

【讨论】：

更好的解决方案。非常感谢！
我不会说我的解决方案更好。它可能更适合您的特定情况。但是 Jon P 指出了关于如何使用标签的一些非常重要的事情，他的解决方案同样有效。
很高兴您的回答被接受。我指出了根本问题。您的解决方案提供了更精简的解决方案。
在输入元素上使用伪元素:before、:after 不是一个好习惯。它仅适用于 chrome，firefox 不支持。在firefox 中检查您的答案，您会看到不同之处。 Read this
该死，你是对的。 @TheRealPapa 我建议，你再次接受另一个答案，我的有缺陷。

【解决方案2】：

注意for 属性适用于目标元素的id 属性而不是name 属性。

将您的标记更改为：

<div>
  <i class="fas fa-square"></i> SAMPLE UNCHECKED
  <br/>
  <i class="fas fa-check-square"></i> SAMPLE CHECKED
  <br/>
  <br/>
  <input name="access_chk[]" value="1" class="access_chk" type="checkbox" id="cb1" checked>
  <label for="cb1">LABEL WITH CONTENT</label>
  <br/>
  <input name="access_chk[]" value="2" class="access_chk" type="checkbox" id="cb2" checked>
  <label for="cb2"></label>
  <br/>
  <input name="access_chk[]" value="3" class="access_chk" type="checkbox" id="cb3" >
  <label for="cb3"></label>
  <br/>
  <input name="access_chk[]" value="4" class="access_chk" type="checkbox" id="cb4" checked>
  <label  for="cb4"></label>
</div>

Demo

【讨论】：

你摇滚！谢谢！