Customize Bootstrap Checkboxes

Customize Bootstrap checkboxes

Since Bootstrap 3 doesn't have a style for checkboxes I found a custom made that goes really well with Bootstrap style.

Checkboxes

.checkbox label:after {

  content: '';

  display: table;

  clear: both;

}

.checkbox .cr {

  position: relative;

  display: inline-block;

  border: 1px solid #a9a9a9;

  border-radius: .25em;

  width: 1.3em;

  height: 1.3em;

  float: left;

  margin-right: .5em;

}

.checkbox .cr .cr-icon {

  position: absolute;

  font-size: .8em;

  line-height: 0;

  top: 50%;

  left: 15%;

}

.checkbox label input[type="checkbox"] {

  display: none;

}

.checkbox label input[type="checkbox"]+.cr>.cr-icon {

  opacity: 0;

}

.checkbox label input[type="checkbox"]:checked+.cr>.cr-icon {

  opacity: 1;

}

.checkbox label input[type="checkbox"]:disabled+.cr {

  opacity: .5;

}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Default checkbox -->

<div class="checkbox">

  <label>

   <input type="checkbox" value="">

   <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>

   Option one

   </label>

</div>

<!-- Checked checkbox -->

<div class="checkbox">

  <label>

   <input type="checkbox" value="" checked>

   <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>

   Option two is checked by default

   </label>

</div>

<!-- Disabled checkbox -->

<div class="checkbox disabled">

  <label>

   <input type="checkbox" value="" disabled>

   <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>

   Option three is disabled

   </label>

</div>

How do you change the style of a bootstrap checkbox

Here's a demo bootply for custom checkboxes that I use, implementing bootstraps glyphicons for the icons. These degrade to ordinary checkboxes in IE8 without any additional code.

Here's the relevant CSS:

    .custom-checkbox > [type="checkbox"],
    .custom-checkbox > label{
        margin-bottom:0px !important;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .custom-checkbox > [type="checkbox"]:not(:checked),
    .custom-checkbox > [type="checkbox"]:checked {
        position: absolute;
        left: -9999px;
    }
    .custom-checkbox > [type="checkbox"]:not(:checked) + label,
    .custom-checkbox > [type="checkbox"]:checked + label {
        position: relative;
        padding-left: 22px;
        cursor: pointer;
    }
    .custom-checkbox > [type="checkbox"]:not(:checked) + label:before,
    .custom-checkbox > [type="checkbox"]:checked + label:before {
        content: '';
        position: absolute;
        left:0; 
        top: 50%;
        margin-top:-9px;
        width: 17px; 
        height: 17px;
        border: 1px solid #ddd;
        background: #ffffff;
        border-radius: 2px;
    }
    .custom-checkbox > [type="checkbox"]:not(:checked) + label:after,
    .custom-checkbox > [type="checkbox"]:checked + label:after {
        font: normal normal normal 12px/1 'Glyphicons Halflings';
        content: '\e013';
        position: absolute;
        top: 50%;
        margin-top:-7px;
        left: 2px;
        color: #94C947;
        xtransition: all .2s;
    }

    .custom-checkbox > [type="checkbox"]:not(:checked) + label:after {
        opacity: 0;
        transform: scale(0);
    }
    .custom-checkbox > [type="checkbox"]:checked + label:after {
        opacity: 1;
        transform: scale(1);
    }

    .custom-checkbox > [type="checkbox"][data-indeterminate] + label:after,
    .custom-checkbox > [type="checkbox"][data-indeterminate] + label:after {
        content: '\2212';
        left: 2px;
        opacity: 1;
        transform: scale(1);
    }

    .custom-checkbox > [type="checkbox"]:disabled:not(:checked) + label:before,
    .custom-checkbox > [type="checkbox"]:disabled:checked + label:before {
        box-shadow: none;
        background-color: #eeeeee;
        border-color: #eeeeee;
        cursor: not-allowed;
        opacity: 1;
        color: #dadada;
    }
    .custom-checkbox > [type="checkbox"]:disabled:checked + label:after {
      color: #dadada; cursor: not-allowed;
    }
    .custom-checkbox > [type="checkbox"]:disabled + label {
      color: #aaa; cursor: not-allowed;
    }
    .custom-checkbox > [type="checkbox"]:checked:focus + label:before,
    .custom-checkbox > [type="checkbox"]:not(:checked):focus + label:before {
        border: 1px solid #66afe9;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    }
    .custom-checkbox > label:hover:before {
        border: 1px solid #88D2FF !important;
    }
    .custom-checkbox > [type="checkbox"]:disabled:not(:checked) + label:hover:before,
    .custom-checkbox > [type="checkbox"]:disabled:checked + label:hover:before{
        border: 1px solid #E4E4E4 !important;
    }

and the HTML:

<div class="custom-checkbox">
    <input type="checkbox" id="cb1">
    <label for="cb1">Fancy Checkbox</label>
 </div>

HTH, -Ted

Bootstrap 4: How can I change the color of checkbox ? Simple way

You are already using Bootstrap's "custom" form controls (albeit slightly incorrectly -- the markup for custom Bootstrap 4 controls is different from your example).

Here's the correct markup for a custom checkbox in Bootstrap 4:

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

The custom look is governed by the custom-* CSS classes. As you are seeing, the default color is Bootstrap's primary "blue" color. To make it green, you would have to override or add your own custom CSS class(es). Here is an example that uses a new class so that if you still want to use the default blue sometimes, you can.

.custom-control-input-green:focus~.custom-control-label::before {

  border-color: #28a745 !important;

  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;

}

.custom-control-input-green:checked~.custom-control-label::before {

  border-color: #28a745 !important;

  background-color: #28a745 !important;

}

.custom-control-input-green:focus:not(:checked)~.custom-control-label::before {

  border-color: #5bd778 !important;

}

.custom-control-input-green:not(:disabled):active~.custom-control-label::before {

  background-color: #d6f5dd !important;

  border-color: #d6f5dd !important;

}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="custom-control custom-checkbox custom-checkbox-green">

  <input type="checkbox" class="custom-control-input custom-control-input-green" id="customCheck1">

  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>

</div>

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

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>

Custom checkbox in bootstrap 4.1.x

Change

 <span class="custom-control-description">Check this custom checkbox</span>

to

<span class="custom-control-label">Check this custom checkbox</span>

What you are missing the class label, it should not be description it should be label.

const checkbox = document.getElementById('checkbox')

checkbox.checked = true
.custom-control-input:checked~.custom-control-label::before {

    color: white !important;

    background-color: green !important;

}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<label class="custom-control custom-checkbox">

      <input type="checkbox" id="checkbox" class="custom-control-input">

      <span class="custom-control-indicator"></span>

      <span class="custom-control-label">Check this custom checkbox</span>

</label>

How can I change the color of Bootstrap checkbox?

I've adapted the .squaredThree class from this CodePen for your example. There's a Fiddle link at the bottom of my answer if you want to see a live example.

Here's the updated CSS:

/* .squaredThree */
.squaredThree {
  position: relative;
  float:left;
}

.squaredThree label {
  width: 20px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  background: #D7B1D7;
  border-radius: 4px;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.4);
}

.squaredThree label:after {
  content: '';
  width: 9px;
  height: 5px;
  position: absolute;
  top: 4px;
  left: 4px;
  border: 3px solid #fcfff4;
  border-top: none;
  border-right: none;
  background: transparent;
  opacity: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.squaredThree label:hover::after {
  opacity: 0.3;
}

.squaredThree input[type=checkbox] {
  visibility: hidden;
}

.squaredThree input[type=checkbox]:checked + label:after {
  opacity: 1;
}
/* end .squaredThree */

I've updated your HTML to include another label, as the original label is used as a pseudo checkbox. This is your updated HTML:

<div class="container">
  <form name="queryForm" class="form-inline">
    <div class="squaredThree">
      <input type="checkbox" name="optionsRadios" id="checkOther" value="other" ng-model="formData.other" ng-true-value="'other'" ng-init="formData.other='other'">
      <label for="checkOther"></label>
    </div>
    <label class="label-text">Other</label>
  </form>
</div>

Note that the additional label exists outside the .squaredThree div. The label has a class of .label-text as some additional styling rules are needed to move the text slightly to the right of the checkbox:

.label-text {
  position: relative;
  left: 10px;
}

Finally, the size of the check in the checkbox isn't quite right so an additional rule is needed to rectify that:

*,
::before,
::after {
  box-sizing: initial;
}

Fiddle Demo showing the above in action.

Custom Bootstrap checkboxes render bug when using CSS column-width in IE

Label css class in _reboot.scss has display : inline-block causing this issue.

Sample Image

Bootstrap 4 radio and checkbox styling

You'll need to override the bootstrap.css that controls the checked and indeterminate states. There are many ways you can do this. For example,

.custom-control-label::before {
  background-color: #f1f2ec;
  border: 2px solid #678000;
  height: 21px;
  width: 21px;
  border-radius: 22px;
  box-sizing: border-box;
}

.custom-control-input:checked ~ .custom-control-label::before {
  color: #678000;
  border-color: #678000;
  background-color: #f1f2ec;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  content: "⬤";
  left: -20.5px;
  top: 1.5px;
  color: #678000;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  content: "";
  color: #678000;
  position: absolute;
  border: 1px #fff solid;
  border-radius: 3px;
  background-color: #678000;
  background-image: none;
  top: 7px;
  left: -21.5px;
  height: 15px;
  width: 16px;
}

.custom-checkbox .custom-control-input[indeterminate] ~ .custom-control-label::after {
  color: #678000;
  background-image: none;
  background-color: #678000;
  position: absolute;
  height: 2px;
  width: 14px;
  top: 13px;
  left: -20.5px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<!-- Radio -->
<div class="col-6 pt-5">
  <form>
    <div class="custom-control custom-radio">
      <input type="radio" class="custom-control-input" id="radioBtn2">
      <label for="radioBtn2" class="custom-control-label"></label>
    </div>
  </form>
</div>

<!-- Checkbox -->
<div class="col-6 pt-5 pb-5">
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck1">
    <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
  </div>
</div>

Related Topics

Variable Name Error "Is Undefined" Even Though "Variables.Less" Imported

Position Absolute and Bottom 0

What Is Style.Cssver=1 Tag

Can't Get Z-Index to Work for Div Inside of Another Div

Skew One Side Only of an Element

How to Animate Flexbox Inserts & Removes

Bullets Disappear with CSS3 Columns

CSS Transitions Between Absolute and Relative Positioning

IE8 Web Font Iframe Bug Workarounds

How to Use Image Sprites in Gwt

Firebug Lite Messagequeue Null

How to Set a Specific CSS Class to a Widget in Gtk3? (C)

Cross Browser Support for CSS Flexbox

Sublime Sftp - Upload Compiled CSS When SASS File Saved

CSS Transition for Only One Type of Transform

Handling CSS Id and Classes with Spaces

3D Box Shadow Effect

Change Font-Weight of Fontawesome Icons


Leave a reply



Submit