Custom checkbox without label's "for" attribute (Bootstrap 4)

Question

Is there a way to still have the Bootstrap 4 custom checkbox styling without using the id on the input and the attribute for on the label? The styling for checked is not there when you remove it.

Example:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="custom-control custom-checkbox mb-3">
  <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
  <label class="custom-control-label">Check this custom checkbox</label>
</div>

I've tried wrapping the input with label, but that doesn't seem to do anything either. Is there a way I could avoid giving the input a static id and still get the Boostrap styled checkbox? Thanks!

I think that you can't do that, because you need to have a way to identify which checkbox you are selecting. — mindmaster, Sep 11 '19 at 14:09
Which means I'll have to generate unique ids for this to work? Meh. But yeah, makes sense. Thanks! — Retros, Sep 11 '19 at 14:15
You don't need to write custom css for `checkbox` if you are using BS4 just replace parent `div to label` and `label to div` so after changes there will not require `id`. — Raeesh Alam, Feb 15 '20 at 07:30

score 5 · Answer 1 · edited Feb 14 '20 at 14:24

5

Here is simplest solution. Label should be used as wrapper for checkbox being clickable.

<div class="custom-control custom-checkbox">
  <label><input type="checkbox" name="checkbox-name" class="custom-control-input">
    <div class="custom-control-label"></div>
    </label>
</div>

edited Feb 14 '20 at 14:24

THess

1,003
1
13
21

answered Feb 14 '20 at 13:05

Roman REZOR

91
1
4

Came across the same issue here https://stackoverflow.com/q/57890808/7937009, this worked. Bootstrap 4 custom checkboxes seem to have strange behaviour without a label – thesilican May 10 '20 at 02:54
Super late hit here, but using a div for the custom-control-label gives invalid HTML, something about divs not being allowed in a label. I changed it to a span and it still works and the error is gone. I had to add a .mb-3 class to the label to get it to align properly. – William T. Mallard Mar 08 '22 at 23:47

score 1 · Accepted Answer · answered Sep 12 '19 at 07:12

Yes you can do but for that you need to do some custom CSS as well.

Please try below CSS

 .custom-checkbox{
    position: relative;
  }
  .custom-checkbox input{
    visibility: hidden;
    margin-right: 8px;
  }
  .custom-label:before,.custom-label:after{
    width: 16px;
    height: 16px;
    content: "";
    border: 1px solid;
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0px;
    border: #adb5bd solid 1px;
    transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    border-radius: .25rem;
  }
  .custom-checkbox input:checked + .custom-label:before{
    border-color: #007bff;
    background-color: #007bff;
  }
  .custom-checkbox input:checked + .custom-label:after{
    width: 4px;
    border: 2px solid #ffffff;
    height: 8px;
    border-top: none;
    border-left: none;
    transform: rotate(40deg);
    left: 6px;
    top: 3px;
  }

<label class="custom-checkbox"><input type=checkbox name=chkbx1> <span class="custom-label">Label here</span></label>

.

score 1 · Answer 3 · answered Apr 09 '21 at 15:22

yes. simple with no JS or id

<style>
        .custom-checkbox {
            padding: 0;
        }

            .custom-checkbox .fa-toggle-on,
            .custom-checkbox .fa-toggle-off {
                font-size: 135%;
                /*this icon is relatively small*/
            }

            .custom-checkbox input[type=checkbox] {
                visibility: collapse;
                width: 0px;
                margin-left: -0.25em;
            }

                .custom-checkbox input[type=checkbox] ~ .custom-check-on {
                    display: none;
                }

                .custom-checkbox input[type=checkbox]:checked ~ .custom-check-on {
                    display: inline;
                }

                .custom-checkbox input[type=checkbox]:checked ~ .custom-check-off {
                    display: none;
                }

                .custom-checkbox input[type=checkbox]:disabled ~ * {
                    color: #b6b4b4;
                }

                .custom-checkbox input[type=checkbox].error ~ .custom-check-on,
                .custom-checkbox input[type=checkbox].error ~ .custom-check-off {
                    border: solid 2px red;
                }

            .custom-checkbox i.btn {
                overflow: hidden;
                color: transparent;
                position: relative;
                display: inline-block;
                width: 3em;
                padding: 0;
                font-style: normal;
            }

            .custom-checkbox .btn:after {
                content: "";
                font-style: normal;
                border: 7px solid white;
                position: absolute;
                top: 0;
                bottom: 0;
                border-radius: 5px;
            }

            .custom-checkbox .custom-check-on.btn:after {
                right: -4px;
            }

            .custom-checkbox .custom-check-off.btn:after {
                left: -4px;
            }

            .custom-checkbox .custom-check-on.btn:before {
                content: "On";
                color: white;
                margin-left: -10px;
            }

            .custom-checkbox .custom-check-off.btn:before {
                content: "Off";
                color: #333;
                margin-right: -15px;
            }

            .custom-checkbox input[type=checkbox]:checked ~ .btn.custom-check-on {
                display: inline-block;
            }
    </style>

<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
       
        <label class="custom-checkbox">
            <input name="check" type="checkbox" autocomplete="off" >
            <i class="custom-check-on btn btn-primary btn-sm">
            </i><i class="custom-check-off btn btn-light active btn-sm">
            </i><input name="check" type="hidden" value="false">
            <span class="ml-1">
                Check Box
            </span>
        </label>
        <br>
        <label class="custom-checkbox">
            <input name="check" type="checkbox" autocomplete="off" >
            <i class="custom-check-on fa fa fa-circle">
            </i><i class="custom-check-off fal fa-circle">
            </i><input name="check" type="hidden" value="false">
            <span class="ml-1">
                Check Box
            </span>
        </label>
        <br>
        <label class="custom-checkbox">
            <input name="check" type="checkbox" autocomplete="off" >
            <i class="custom-check-on far fa-check-square" style="color:black" >
            </i><i class="custom-check-off far fa-square" style="color:lightgray">
            </i><input name="check" type="hidden" value="false">
            <span class="ml-1">
                Check Box
            </span>
        </label>
        <br>
        <label class="custom-checkbox">
            <input name="check" type="checkbox" autocomplete="off" >
            <i class="custom-check-on text-info  fa fa-toggle-on">
            </i><i class="custom-check-off text-secondary fa fa-toggle-off">
            </i><input name="check" type="hidden" value="false">
            <span class="ml-1">
                Check Box
            </span>
        </label>
        <br>
        <label class="custom-checkbox">
            <input name="check" type="checkbox" autocomplete="off" >
            <i class="custom-check-on text-success far fa-smile">
            </i><i class="custom-check-off text-danger fas fa-angry">
            </i><input name="check" type="hidden" value="false">
            <span class="ml-1">
                Check Box
            </span>
        </label>
        <br>
        <label class="custom-checkbox">
            <input name="check" type="checkbox" autocomplete="off" >
            <i class="custom-check-on fas fa-arrow-alt-circle-up">
            </i><i class="custom-check-off far fa-arrow-alt-circle-down">
            </i><input name="check" type="hidden" value="false">
            <span class="ml-1">
                Check Box
            </span>
        </label>
        <br>


    </div>

It's actually very simple. It uses CSS to turn on/off custom-check-on and custom-check-off component based on the "check" status of the checkbox. the other input tag is required if you are using asp.net — Kevin Eghbali, Apr 11 '21 at 14:31

score 0 · Answer 4 · answered Sep 11 '19 at 14:20

0

no that is not possible to remove ID and For.

because the for="customControlValidation1" attribute allow us to click the id="customControlValidation1" means when we click the label it considers checkbox click and checkbox state will change.

answered Sep 11 '19 at 14:20

KuldipKoradia

3,005
7
20

1

It's actually allowed to have the `input` element inside the `label` element. Using that, you don't need to use `id` and `for`, because it just looks at the child element of the label in the DOM. https://stackoverflow.com/questions/774054/should-i-put-input-elements-inside-a-label-element – ShamPooSham Sep 11 '19 at 14:25
But I'm unsure if you can use that technique for bootstrap's custom checkbox – ShamPooSham Sep 11 '19 at 14:28
ya we can define input in side the label but we can not make the label click using the input because input is a child element and label is parent element. – KuldipKoradia Sep 11 '19 at 14:34

score -2 · Answer 5 · answered Sep 11 '19 at 14:01

i sure this work perfectly

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="custom-control custom-checkbox mb-3">
  <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
  <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
</div>

Please read my question again. I mentioned trying not to use id and for attribute for input and label. — Retros, Sep 11 '19 at 14:02

Custom checkbox without label's "for" attribute (Bootstrap 4)

5 Answers5

Linked