1

The company I work for has an in-house extension of bootstrap classes. I'm having difficulty using the checkbox they provide, so I have to dive into their code. I'm starting with this HTML snippet:

<div class="checkbox XXXbs-checkbox">                
    <label for="checkbox-id">Some Text</label>
    <input class="form-control" id="checkbox-id" name="checkbox-name" role="checkbox" type="checkbox" value="y">
</div>

Their checkbox css contains this ("XXX" is in place of a string that would identify the company I work for):

.XXXbs-checkbox input[type=checkbox] {
    opacity: 0;
    margin-left: 4px;
    cursor: pointer;
    z-index: 1;
    width: 100%;
}

Opacity is 0, making the actual checkbox from the above HTML invisible. Meanwhile, they also have this:

.XXXbs-checkbox>label::before {
    font-family: XXX-icon;
    content: "\e903";
    font-size: 32px;
    position: absolute;
    top: -15px;
    left: 0;
}

to place an empty checkbox before the label, and this:

.XXXbs-checkbox>input[type=checkbox]:checked+label::before {
    content: "\e904";
    color: #000
}

to render a box with a check mark in it.

My question is, why would you use this approach? Why would you draw a fake checkbox in front of the label instead of just styling the actual checkbox?

boing
  • 499
  • 2
  • 6
  • 22

1 Answers1

5

Why would you draw a fake checkbox in front of the label instead of just styling the actual checkbox?

Because the amount of styling you can apply to a checkbox itself is very, very limited.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335