All geek questions in one place

Custom checkbox in css not working

I am new to CSS and jQuery. I tried to configure the checkbox, but it does not work. Could you debug this.

Here is my code:

.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>
Run codeHide result

And my conclusion looks like

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

Can someone help me debug this.

+4
source share
1 answer

The reason your checkbox has a rectangle inside it and not an icon is because you use Font Awesome without loading it. Your browser sees the special character U + F095, but it does not know where to find the icons, so it draws a field instead.

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>
Hide result
+3

Source: https://habr.com/ru/post/1623628/

More articles:


All Articles