css中的自定义复选框不起作用答案

【问题标题】：Custom check box in css not workingcss中的自定义复选框不起作用
【发布时间】：2016-01-10 06:00:09
【问题描述】：

我是 CSS 和 jQuery 的新手。我尝试自定义复选框，但不工作。你能调试一下吗？

这是我的代码：

.checkbox-custom{
    opacity: 0;
    position: absolute;   
}
.checkbox-custom, .checkbox-custom-label{
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    cursor: pointer;
}
.checkbox-custom-label {
    position: relative;
}
.checkbox-custom + .checkbox-custom-label:before{
    content: '';
    background: #fff;
    border: 2px solid #ddd;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    padding: 2px;
    margin-right: 10px;
    text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
    content: "\f095";
    font-family: 'FontAwesome';
    background: rebeccapurple;
    color: #fff;
}

<input id="checkbox-3" class="checkbox-custom" name="checkbox-3" type="checkbox">
<label for="checkbox-3"class="checkbox-custom-label">Third Choice</label>

我的输出看起来像，

http://i.stack.imgur.com/PcSYs.png

谁能帮我调试一下。

【问题讨论】：

这可能是由 IE 引起的。它在 chrome 中看起来正确。
从外观上看，字体 Awesome 字体没有正确加载。如果您进入控制台，您是否看到丢失文件的任何错误？您可能还想使用 ::before 而不是 :before (developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Abefore)

标签： jquery html css checkbox

【解决方案1】：

你的复选框里面有一个矩形而不是一个图标的原因是你在使用 Font Awesome 时没有加载它。您的浏览器会看到特殊的 U+F095 字符，但它不知道在哪里可以找到这些图标，因此它会改为绘制一个框。

虽然there are several ways to load Font Awesome，但最简单的方法是将这行代码添加到您网站的<head> 标记中：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

这是添加了该行的 sn-p 版本：

.checkbox-custom{
    opacity: 0;
    position: absolute;   
}
.checkbox-custom, .checkbox-custom-label{
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    cursor: pointer;
}
.checkbox-custom-label {
    position: relative;
}
.checkbox-custom + .checkbox-custom-label:before{
    content: '';
    background: #fff;
    border: 2px solid #ddd;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    padding: 2px;
    margin-right: 10px;
    text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
    content: "\f095";
    font-family: 'FontAwesome';
    background: rebeccapurple;
    color: #fff;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<input id="checkbox-3" class="checkbox-custom" name="checkbox-3" type="checkbox">
<label for="checkbox-3"class="checkbox-custom-label">Third Choice</label>

【讨论】：