Customize Bootstrap checkboxes

Question

I m using Bootstrap in my Angular application and all other styles are working like they should  but checkbox style doesn t  It just look like plain old checkbox    x000D   x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  integrity  sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz K68vbdEjh4u  crossorigin  anonymous  gt  x000D   lt div class  container  gt  x000D     lt form class  form-signin  gt  x000D       lt h2 class  form-signin-heading  gt Please log in lt  h2 gt  x000D       lt label for  inputEmail  class  sr-only  gt User name lt  label gt  x000D       lt input   ngModel    loginUser Username  type  username  name  username  id  inputEmail  class  form-control  placeholder  User name  required autofocus gt  x000D       lt label for  inputPassword  class  sr-only  gt Password lt  label gt  x000D       lt input   ngModel    loginUser Password  type  password  name  password  id  inputPassword  class  form-control  placeholder  Password  required gt  x000D       lt a  ngIf  register    false   click   registerState    gt Register lt  a gt  x000D       lt div class  checkbox  gt  x000D         lt label gt  x000D            lt input type  checkbox    ngModel    rememberMe  name  rememberme  gt  Remember me x000D            lt  label gt  x000D       lt  div gt  x000D       lt button  ngIf  register    false   click   login    class  btn btn-lg btn-primary btn-block  type  submit  gt Log in lt  button gt  x000D     lt  form gt  x000D   lt  div gt  x000D   x000D   x000D    What it looks like     What I want it to look like with Bootstrap style

User · Accepted Answer

Since Bootstrap 3 doesn t have a style for checkboxes I found a custom made that goes really well with Bootstrap style   Checkboxes   x000D   x000D   checkbox label after   x000D    content      x000D    display  table  x000D    clear  both  x000D    x000D   x000D   checkbox  cr   x000D    position  relative  x000D    display  inline-block  x000D    border  1px solid  a9a9a9  x000D    border-radius   25em  x000D    width  1 3em  x000D    height  1 3em  x000D    float  left  x000D    margin-right   5em  x000D    x000D   x000D   checkbox  cr  cr-icon   x000D    position  absolute  x000D    font-size   8em  x000D    line-height  0  x000D    top  50   x000D    left  15   x000D    x000D   x000D   checkbox label input type  checkbox     x000D    display  none  x000D    x000D   x000D   checkbox label input type  checkbox    cr gt  cr-icon   x000D    opacity  0  x000D    x000D   x000D   checkbox label input type  checkbox   checked  cr gt  cr-icon   x000D    opacity  1  x000D    x000D   x000D   checkbox label input type  checkbox   disabled  cr   x000D    opacity   5  x000D    x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  integrity  sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz K68vbdEjh4u  crossorigin  anonymous  gt  x000D   x000D   lt  -- Default checkbox -- gt  x000D   lt div class  checkbox  gt  x000D     lt label gt  x000D      lt input type  checkbox  value    gt  x000D      lt span class  cr  gt  lt i class  cr-icon glyphicon glyphicon-ok  gt  lt  i gt  lt  span gt  x000D     Option one x000D      lt  label gt  x000D   lt  div gt  x000D   x000D   lt  -- Checked checkbox -- gt  x000D   lt div class  checkbox  gt  x000D     lt label gt  x000D      lt input type  checkbox  value    checked gt  x000D      lt span class  cr  gt  lt i class  cr-icon glyphicon glyphicon-ok  gt  lt  i gt  lt  span gt  x000D     Option two is checked by default x000D      lt  label gt  x000D   lt  div gt  x000D   x000D   lt  -- Disabled checkbox -- gt  x000D   lt div class  checkbox disabled  gt  x000D     lt label gt  x000D      lt input type  checkbox  value    disabled gt  x000D      lt span class  cr  gt  lt i class  cr-icon glyphicon glyphicon-ok  gt  lt  i gt  lt  span gt  x000D     Option three is disabled x000D      lt  label gt  x000D   lt  div gt  x000D   x000D   x000D    Radio   x000D   x000D   checkbox label after  x000D   radio label after   x000D    content      x000D    display  table  x000D    clear  both  x000D    x000D   x000D   checkbox  cr  x000D   radio  cr   x000D    position  relative  x000D    display  inline-block  x000D    border  1px solid  a9a9a9  x000D    border-radius   25em  x000D    width  1 3em  x000D    height  1 3em  x000D    float  left  x000D    margin-right   5em  x000D    x000D   x000D   radio  cr   x000D    border-radius  50   x000D    x000D   x000D   checkbox  cr  cr-icon  x000D   radio  cr  cr-icon   x000D    position  absolute  x000D    font-size   8em  x000D    line-height  0  x000D    top  50   x000D    left  13   x000D    x000D   x000D   radio  cr  cr-icon   x000D    margin-left  0 04em  x000D    x000D   x000D   checkbox label input type  checkbox    x000D   radio label input type  radio     x000D    display  none  x000D    x000D   x000D   checkbox label input type  checkbox    cr gt  cr-icon  x000D   radio label input type  radio    cr gt  cr-icon   x000D    opacity  0  x000D    x000D   x000D   checkbox label input type  checkbox   checked  cr gt  cr-icon  x000D   radio label input type  radio   checked  cr gt  cr-icon   x000D    opacity  1  x000D    x000D   x000D   checkbox label input type  checkbox   disabled  cr  x000D   radio label input type  radio   disabled  cr   x000D    opacity   5  x000D    x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  integrity  sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz K68vbdEjh4u  crossorigin  anonymous  gt  x000D   lt link rel  stylesheet  href  https   use fontawesome com releases v5 0 10 css all css  integrity  sha384- d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46 porD OvrJ 37WqIM7UoBtwHO6Nlg  crossorigin  anonymous  gt  x000D   x000D   lt  -- Default radio -- gt  x000D   lt div class  radio  gt  x000D     lt label gt  x000D      lt input type  radio  name  o3  value    gt  x000D      lt span class  cr  gt  lt i class  cr-icon fa fa-circle  gt  lt  i gt  lt  span gt  x000D     Option one x000D      lt  label gt  x000D   lt  div gt  x000D   x000D   lt  -- Checked radio -- gt  x000D   lt div class  radio  gt  x000D     lt label gt  x000D      lt input type  radio  name  o3  value    checked gt  x000D      lt span class  cr  gt  lt i class  cr-icon fa fa-circle  gt  lt  i gt  lt  span gt  x000D     Option two is checked by default x000D      lt  label gt  x000D   lt  div gt  x000D   x000D   lt  -- Disabled radio -- gt  x000D   lt div class  radio disabled  gt  x000D     lt label gt  x000D      lt input type  radio  name  o3  value    disabled gt  x000D      lt span class  cr  gt  lt i class  cr-icon fa fa-circle  gt  lt  i gt  lt  span gt  x000D     Option three is disabled x000D      lt  label gt  x000D   lt  div gt  x000D   x000D   x000D    Custom icons  You can choose your own icon between the ones from Bootstrap or Font Awesome by changing  icon name  with your icon    lt span class  cr  gt  lt i class  cr-icon  icon name   gt  lt  i gt    For example    glyphicon glyphicon-remove for Bootstrap  or fa fa-bullseye for Font Awesome    x000D   x000D   checkbox label after  x000D   radio label after   x000D    content      x000D    display  table  x000D    clear  both  x000D    x000D   x000D   checkbox  cr  x000D   radio  cr   x000D    position  relative  x000D    display  inline-block  x000D    border  1px solid  a9a9a9  x000D    border-radius   25em  x000D    width  1 3em  x000D    height  1 3em  x000D    float  left  x000D    margin-right   5em  x000D    x000D   x000D   radio  cr   x000D    border-radius  50   x000D    x000D   x000D   checkbox  cr  cr-icon  x000D   radio  cr  cr-icon   x000D    position  absolute  x000D    font-size   8em  x000D    line-height  0  x000D    top  50   x000D    left  15   x000D    x000D   x000D   radio  cr  cr-icon   x000D    margin-left  0 04em  x000D    x000D   x000D   checkbox label input type  checkbox    x000D   radio label input type  radio     x000D    display  none  x000D    x000D   x000D   checkbox label input type  checkbox    cr gt  cr-icon  x000D   radio label input type  radio    cr gt  cr-icon   x000D    opacity  0  x000D    x000D   x000D   checkbox label input type  checkbox   checked  cr gt  cr-icon  x000D   radio label input type  radio   checked  cr gt  cr-icon   x000D    opacity  1  x000D    x000D   x000D   checkbox label input type  checkbox   disabled  cr  x000D   radio label input type  radio   disabled  cr   x000D    opacity   5  x000D    x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  integrity  sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz K68vbdEjh4u  crossorigin  anonymous  gt  x000D   lt link rel  stylesheet  href  https   use fontawesome com releases v5 0 10 css all css  integrity  sha384- d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46 porD OvrJ 37WqIM7UoBtwHO6Nlg  crossorigin  anonymous  gt  x000D   x000D   lt div class  checkbox  gt  x000D     lt label gt  x000D      lt input type  checkbox  value    checked gt  x000D      lt span class  cr  gt  lt i class  cr-icon glyphicon glyphicon-remove  gt  lt  i gt  lt  span gt  x000D     Bootstrap - Custom icon checkbox x000D      lt  label gt  x000D   lt  div gt  x000D   x000D   lt div class  radio  gt  x000D     lt label gt  x000D      lt input type  radio  name  o3  value    checked gt  x000D      lt span class  cr  gt  lt i class  cr-icon fa fa-bullseye  gt  lt  i gt  lt  span gt  x000D     Font Awesome - Custom icon radio checked by default x000D      lt  label gt  x000D   lt  div gt  x000D   lt div class  radio  gt  x000D     lt label gt  x000D      lt input type  radio  name  o3  value    gt  x000D      lt span class  cr  gt  lt i class  cr-icon fa fa-bullseye  gt  lt  i gt  lt  span gt  x000D     Font Awesome - Custom icon radio x000D      lt  label gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

As others have said  the style you re after is actually just the Mac OS checkbox style  so it will look radically different on other devices   In fact both screenshots you linked show what checkboxes look like on Mac OS in Chrome  the grey one is shown at non-100  zoom levels

User · Answer

Here you have an example styling checkboxes and radios using Font Awesome 5 free[

_x000D_

  /*General style*/_x000D_
  .custom-checkbox label, .custom-radio label {_x000D_
    position: relative;_x000D_
    cursor: pointer;_x000D_
    color: #666;_x000D_
    font-size: 30px;_x000D_
  }_x000D_
 .custom-checkbox input[type="checkbox"] ,.custom-radio input[type="radio"] {_x000D_
    position: absolute;_x000D_
    right: 9000px;_x000D_
  }_x000D_
   /*Custom checkboxes style*/_x000D_
  .custom-checkbox input[type="checkbox"]+.label-text:before {_x000D_
    content: "\f0c8";_x000D_
    font-family: "Font Awesome 5 Pro";_x000D_
    speak: none;_x000D_
    font-style: normal;_x000D_
    font-weight: normal;_x000D_
    font-variant: normal;_x000D_
    text-transform: none;_x000D_
    line-height: 1;_x000D_
    -webkit-font-smoothing: antialiased;_x000D_
    width: 1em;_x000D_
    display: inline-block;_x000D_
    margin-right: 5px;_x000D_
  }_x000D_
  .custom-checkbox input[type="checkbox"]:checked+.label-text:before {_x000D_
    content: "\f14a";_x000D_
    color: #2980b9;_x000D_
    animation: effect 250ms ease-in;_x000D_
  }_x000D_
  .custom-checkbox input[type="checkbox"]:disabled+.label-text {_x000D_
    color: #aaa;_x000D_
  }_x000D_
  .custom-checkbox input[type="checkbox"]:disabled+.label-text:before {_x000D_
    content: "\f0c8";_x000D_
    color: #ccc;_x000D_
  }_x000D_
_x000D_
   /*Custom checkboxes style*/_x000D_
  .custom-radio input[type="radio"]+.label-text:before {_x000D_
    content: "\f111";_x000D_
    font-family: "Font Awesome 5 Pro";_x000D_
    speak: none;_x000D_
    font-style: normal;_x000D_
    font-weight: normal;_x000D_
    font-variant: normal;_x000D_
    text-transform: none;_x000D_
    line-height: 1;_x000D_
    -webkit-font-smoothing: antialiased;_x000D_
    width: 1em;_x000D_
    display: inline-block;_x000D_
    margin-right: 5px;_x000D_
  }_x000D_
_x000D_
  .custom-radio input[type="radio"]:checked+.label-text:before {_x000D_
    content: "\f192";_x000D_
    color: #8e44ad;_x000D_
    animation: effect 250ms ease-in;_x000D_
  }_x000D_
_x000D_
  .custom-radio input[type="radio"]:disabled+.label-text {_x000D_
    color: #aaa;_x000D_
  }_x000D_
_x000D_
  .custom-radio input[type="radio"]:disabled+.label-text:before {_x000D_
    content: "\f111";_x000D_
    color: #ccc;_x000D_
  }_x000D_
_x000D_
  @keyframes effect {_x000D_
    0% {_x000D_
      transform: scale(0);_x000D_
    }_x000D_
    25% {_x000D_
      transform: scale(1.3);_x000D_
    }_x000D_
    75% {_x000D_
      transform: scale(1.4);_x000D_
    }_x000D_
    100% {_x000D_
      transform: scale(1);_x000D_
    }_x000D_
  }

_x000D_

<script src="https://kit.fontawesome.com/2a10ab39d6.js"></script>_x000D_
<div class="col-md-4">_x000D_
  <form>_x000D_
    <h2>1. Customs Checkboxes</h2>_x000D_
    <div class="custom-checkbox">_x000D_
      <div class="form-check">_x000D_
        <label>_x000D_
                    <input type="checkbox" name="check" checked> <span class="label-text">Option 01</span>_x000D_
                </label>_x000D_
      </div>_x000D_
      <div class="form-check">_x000D_
        <label>_x000D_
                    <input type="checkbox" name="check"> <span class="label-text">Option 02</span>_x000D_
                </label>_x000D_
      </div>_x000D_
      <div class="form-check">_x000D_
        <label>_x000D_
                    <input type="checkbox" name="check"> <span class="label-text">Option 03</span>_x000D_
                </label>_x000D_
      </div>_x000D_
      <div class="form-check">_x000D_
        <label>_x000D_
                    <input type="checkbox" name="check" disabled> <span class="label-text">Option 04</span>_x000D_
                </label>_x000D_
      </div>_x000D_
    </div>_x000D_
  </form>_x000D_
</div>_x000D_
<div class="col-md-4">_x000D_
  <form>_x000D_
    <h2>2. Customs Radios</h2>_x000D_
    <div class="custom-radio">_x000D_
_x000D_
      <div class="form-check">_x000D_
        <label>_x000D_
                    <input type="radio" name="radio" checked> <span class="label-text">Option 01</span>_x000D_
                </label>_x000D_
      </div>_x000D_
      <div class="form-check">_x000D_
        <label>_x000D_
                    <input type="radio" name="radio"> <span class="label-text">Option 02</span>_x000D_
                </label>_x000D_
      </div>_x000D_
      <div class="form-check">_x000D_
        <label>_x000D_
                    <input type="radio" name="radio"> <span class="label-text">Option 03</span>_x000D_
                </label>_x000D_
      </div>_x000D_
      <div class="form-check">_x000D_
        <label>_x000D_
                    <input type="radio" name="radio" disabled> <span class="label-text">Option 04</span>_x000D_
                </label>_x000D_
      </div>_x000D_
    </div>_x000D_
  </form>_x000D_
</div>

_x000D_

User · Answer

x000D   x000D     The customcheck    x000D   customcheck   x000D      display  block  x000D      position  relative  x000D      padding-left  35px  x000D      margin-bottom  12px  x000D      cursor  pointer  x000D      font-size  22px  x000D      -webkit-user-select  none  x000D      -moz-user-select  none  x000D      -ms-user-select  none  x000D      user-select  none  x000D    x000D   x000D     Hide the browser s default checkbox    x000D   customcheck input   x000D      position  absolute  x000D      opacity  0  x000D      cursor  pointer  x000D    x000D   x000D     Create a custom checkbox    x000D   checkmark   x000D      position  absolute  x000D      top  0  x000D      left  0  x000D      height  25px  x000D      width  25px  x000D      background-color   eee  x000D      border-radius  5px  x000D    x000D   x000D     On mouse-over  add a grey background color    x000D   customcheck hover input    checkmark   x000D      background-color   ccc  x000D    x000D   x000D     When the checkbox is checked  add a blue background    x000D   customcheck input checked    checkmark   x000D      background-color   02cf32  x000D      border-radius  5px  x000D    x000D   x000D     Create the checkmark indicator  hidden when not checked     x000D   checkmark after   x000D      content      x000D      position  absolute  x000D      display  none  x000D    x000D   x000D     Show the checkmark when checked    x000D   customcheck input checked    checkmark after   x000D      display  block  x000D    x000D   x000D     Style the checkmark indicator    x000D   customcheck  checkmark after   x000D      left  9px  x000D      top  5px  x000D      width  5px  x000D      height  10px  x000D      border  solid white  x000D      border-width  0 3px 3px 0  x000D      -webkit-transform  rotate 45deg   x000D      -ms-transform  rotate 45deg   x000D      transform  rotate 45deg   x000D    x000D   lt div class  container  gt  x000D    lt h1 gt Custom Checkboxes lt  h1 gt  lt  br gt  x000D    x000D           lt label class  customcheck  gt One x000D             lt input type  checkbox  checked  checked  gt  x000D             lt span class  checkmark  gt  lt  span gt  x000D           lt  label gt  x000D           lt label class  customcheck  gt Two x000D             lt input type  checkbox  gt  x000D             lt span class  checkmark  gt  lt  span gt  x000D           lt  label gt  x000D           lt label class  customcheck  gt Three x000D             lt input type  checkbox  gt  x000D             lt span class  checkmark  gt  lt  span gt  x000D           lt  label gt  x000D           lt label class  customcheck  gt Four x000D             lt input type  checkbox  gt  x000D             lt span class  checkmark  gt  lt  span gt  x000D           lt  label gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You have to use Bootstrap version 4 with the custom-* classes to get this style:

_x000D_

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<!-- example code of the bootstrap website -->_x000D_
<label class="custom-control custom-checkbox">_x000D_
  <input type="checkbox" class="custom-control-input">_x000D_
  <span class="custom-control-indicator"></span>_x000D_
  <span class="custom-control-description">Check this custom checkbox</span>_x000D_
</label>_x000D_
_x000D_
<!-- your code with the custom classes of version 4 -->_x000D_
<div class="checkbox">_x000D_
  <label class="custom-control custom-checkbox">_x000D_
    <input type="checkbox" [(ngModel)]="rememberMe" name="rememberme" class="custom-control-input">_x000D_
    <span class="custom-control-indicator"></span>_x000D_
    <span class="custom-control-description">Remember me</span>_x000D_
  </label>_x000D_
</div>

_x000D_

Documentation: https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios-1

Custom checkbox style on Bootstrap version 3?
Bootstrap version 3 doesn't have custom checkbox styles, but you can use your own. In this case: How to style a checkbox using CSS?

These custom styles are only available since version 4.

[css] Customize Bootstrap checkboxes

The answer is

Checkboxes

Radio

Custom icons

Examples related to css

Examples related to twitter-bootstrap

Examples related to checkbox

Tags