Question

我是CSS和jQuery的新手。我试图自定义复选框但是没有工作。你可以调试一下。

这是我的代码：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

我的输出看起来像，

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

任何人都可以帮我调试这个。

Answer 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">

以下是添加了该行的代码段的一个版本：

.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>

css中的自定义复选框无法正常工作

1 个答案: