CSS: Custom Checkbox doesn't work

Question

I changed my checkboxes with the help of css, it work in Chrome, but not in i.e and edge. So, I found this reference: ref

This is my code:

.checkbox-style {
   display: none;
}

.checkbox-style + label {
    position: relative;
    display: block;
    width: 14px;
    height: 14px;
    border: 1px solid #C0C5C9;
    content: "";
    background: #FFF;
    align-items: center;
}

.checkbox-style[type="checkbox"]:checked + label:before {
    font-family: 'FontAwesome' !important;
    content: "\f00c";
    border: none;
    color: #015CDA;
    font-size: 12px;
    -webkit-text-stroke: medium #FFF;
    margin-left: -11px;
}

And this is the html:

<span class="checkbox-wrapper" role="presentation"> <input type="checkbox" class="checkbox-style"><label></label></span>

The checkbox is appear like I wanted but the :before of the label is not creating when I click on the checkbox. So, my checkboxes are not checkable. Why?

I need to do display:none, to customize my checkbox. Look at the reference I added. — RoG, Jun 28 '18 at 14:46
your checkbox is `display: none;`... it can't be `:checked`. you can do something like [this](https://jsfiddle.net/aq9Laaew/60800/) maybe — zgood, Jun 28 '18 at 14:47
Where does your ref say you need display none on your checkbox? — zgood, Jun 28 '18 at 14:49

score 1 · Accepted Answer · answered Jun 28 '18 at 15:03

Your checkbox can not be check because you have it display:none;. The common strategy for custom checkboxes is to hide the checkbox (like with opacity or visibility maybe) and position it over the "fake" checkbox.

So you can try something like this:

body {
    padding: 50px;
}

.checkbox-wrapper {
    position: relative;
}

.checkbox-style {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
 }

        .checkbox-style + label {      
            display: block;
            width: 14px;
            height: 14px;
            border: 1px solid #C0C5C9;
            background: #FFF;
            line-height: 14px;
            text-align: center;
        }

        .checkbox-style[type="checkbox"]:checked + label:before {
            font-family: 'FontAwesome' !important;
            content: "\f00c";
            border: none;
            color: #015CDA;
            font-size: 12px;
            -webkit-text-stroke: medium #FFF;
        }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<span class="checkbox-wrapper" role="presentation"> <input type="checkbox" class="checkbox-style"><label></label></span>

I updated your CSS by hiding the checkbox with opacity and absolutely positioning it over the label.

From the label I removed content: "" because this is only for :before and :after styles, align-items: center; because this only applies to flexbox display and your label is block. I then set its line-height equal to its height (14px) and set text-align: center to center you checkmark icon.

I also set the checkbox-wrapper to position relative to anchor the hidden checkbox off of.

CSS: Custom Checkbox doesn't work

1 Answers1