Bootstrap Custom Checkbox Without Attribute For

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

Solution 1:

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

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

Solution 2:

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-checkboxinput{
    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-checkboxinput:checked + .custom-label:before{
    border-color: #007bff;
    background-color: #007bff;
  }
  .custom-checkboxinput: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;
  }

<labelclass="custom-checkbox"><inputtype=checkboxname=chkbx1><spanclass="custom-label">Label here</span></label>

.

Solution 3:

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-checkboxinput[type=checkbox] {
                visibility: collapse;
                width: 0px;
                margin-left: -0.25em;
            }

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

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

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

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

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

            .custom-checkboxi.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-checkboxinput[type=checkbox]:checked ~ .btn.custom-check-on {
                display: inline-block;
            }
    </style>

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

Solution 4:

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.

Solution 5:

i sure this work perfectly

<linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"crossorigin="anonymous"><divclass="custom-control custom-checkbox mb-3"><inputtype="checkbox"class="custom-control-input"id="customControlValidation1"required><labelclass="custom-control-label"for="customControlValidation1">Check this custom checkbox</label></div>