解决方案

Question

我试图在标签包装输入时尝试在特定实例中显示FontAwesome复选框。但是，我不确定它为什么不起作用。

此链接有相同的问题，但提供的答案并不起作用。 How to Style CSS Checkboxes with Font Awesome

关于上述链接中答案中提供的CSS为何不起作用的任何想法都不起作用？

Answer 1

由于input是 无法拥有内容 的元素之一，因此请勿:before或{{1} }，因为这依赖于:after。

说明：

检查此示例：

content: ...;

如果你申请

<p class="my-element">some text</p>

浏览器将其呈现为

.my-element:before {
    content: "My element: ";
}

因此<p class="my-element">My element: some text</p>可以在中添加 - p。

现在浏览器应该将“我的元素：”放在以下哪个位置？

content

此元素里面没有，因此没有任何内容可以添加<input type="checkbox" class="my-element" />。

解决方案

因此，如果您想使用content: "My element: "应用样式，并且想要隐藏该复选框，但仍然需要“可点击”，则需要将:checked附加到而不是包装复选框，但使用label元素的for属性，该属性必须与复选框的label属性匹配。将输入中的id 放在HTML中，然后您可以在标签元素上使用label或:before（可以有内容）：

:after

使用<label>周围输入添加FontAwesome复选框

1 个答案:

说明：

解决方案