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>

 Run code snippetExpand snippet

Radio

.checkbox label:after,
.radio label:after {
  content: '';
  display: table;
  clear: both;
}

.checkbox .cr,
.radio .cr {
  position: relative;
  display: inline-block;
  border: 1px solid #a9a9a9;
  border-radius: .25em;
  width: 1.3em;
  height: 1.3em;
  float: left;
  margin-right: .5em;
}

.radio .cr {
  border-radius: 50%;
}

.checkbox .cr .cr-icon,
.radio .cr .cr-icon {
  position: absolute;
  font-size: .8em;
  line-height: 0;
  top: 50%;
  left: 13%;
}

.radio .cr .cr-icon {
  margin-left: 0.04em;
}

.checkbox label input[type="checkbox"],
.radio label input[type="radio"] {
  display: none;
}

.checkbox label input[type="checkbox"]+.cr>.cr-icon,
.radio label input[type="radio"]+.cr>.cr-icon {
  opacity: 0;
}

.checkbox label input[type="checkbox"]:checked+.cr>.cr-icon,
.radio label input[type="radio"]:checked+.cr>.cr-icon {
  opacity: 1;
}

.checkbox label input[type="checkbox"]:disabled+.cr,
.radio label input[type="radio"]: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">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

<!-- Default radio -->
<div class="radio">
  <label>
   <input type="radio" name="o3" value="">
   <span class="cr"><i class="cr-icon fa fa-circle"></i></span>
   Option one
   </label>
</div>

<!-- Checked radio -->
<div class="radio">
  <label>
   <input type="radio" name="o3" value="" checked>
   <span class="cr"><i class="cr-icon fa fa-circle"></i></span>
   Option two is checked by default
   </label>
</div>

<!-- Disabled radio -->
<div class="radio disabled">
  <label>
   <input type="radio" name="o3" value="" disabled>
   <span class="cr"><i class="cr-icon fa fa-circle"></i></span>
   Option three is disabled
   </label>
</div>

 Run code snippetExpand snippet

Custom icons

You can choose your own icon between the ones from Bootstrap or Font Awesome by changing [icon name] with your icon.

<span class="cr"><i class="cr-icon [icon name]"></i>

For example:

  • glyphicon glyphicon-remove for Bootstrap, or
  • fa fa-bullseye for Font Awesome
.checkbox label:after,
.radio label:after {
  content: '';
  display: table;
  clear: both;
}

.checkbox .cr,
.radio .cr {
  position: relative;
  display: inline-block;
  border: 1px solid #a9a9a9;
  border-radius: .25em;
  width: 1.3em;
  height: 1.3em;
  float: left;
  margin-right: .5em;
}

.radio .cr {
  border-radius: 50%;
}

.checkbox .cr .cr-icon,
.radio .cr .cr-icon {
  position: absolute;
  font-size: .8em;
  line-height: 0;
  top: 50%;
  left: 15%;
}

.radio .cr .cr-icon {
  margin-left: 0.04em;
}

.checkbox label input[type="checkbox"],
.radio label input[type="radio"] {
  display: none;
}

.checkbox label input[type="checkbox"]+.cr>.cr-icon,
.radio label input[type="radio"]+.cr>.cr-icon {
  opacity: 0;
}

.checkbox label input[type="checkbox"]:checked+.cr>.cr-icon,
.radio label input[type="radio"]:checked+.cr>.cr-icon {
  opacity: 1;
}

.checkbox label input[type="checkbox"]:disabled+.cr,
.radio label input[type="radio"]: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">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

<div class="checkbox">
  <label>
   <input type="checkbox" value="" checked>
   <span class="cr"><i class="cr-icon glyphicon glyphicon-remove"></i></span>
   Bootstrap - Custom icon checkbox
   </label>
</div>

<div class="radio">
  <label>
   <input type="radio" name="o3" value="" checked>
   <span class="cr"><i class="cr-icon fa fa-bullseye"></i></span>
   Font Awesome - Custom icon radio checked by default
   </label>
</div>
<div class="radio">
  <label>
   <input type="radio" name="o3" value="">
   <span class="cr"><i class="cr-icon fa fa-bullseye"></i></span>
   Font Awesome - Custom icon radio
   </label>
</div>

Related Posts:

  1. What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?
  2. Does bootstrap have builtin padding and margin classes?
  3. How to set up fixed width for ?
  4. How to change btn color in Bootstrap
  5. How to set up fixed width for ?
  6. css to make bootstrap navbar transparent
  7. Bootstrap 4, How do I center-align a button?
  8. Responsive Bootstrap Jumbotron Background Image
  9. Changing the width of Bootstrap popover
  10. How to center vertically and horizontally a div using Bootstrap?
  11. Flushing footer to bottom of the page, twitter bootstrap
  12. bootstrap 4 row height
  13. Bootstrap change carousel height
  14. Twitter Bootstrap – add top space between rows
  15. How can I make Bootstrap columns all the same height?
  16. Set bootstrap modal body height by percentage
  17. Bootstrap align navbar items to the right
  18. Why is my Bootstrap code not working?
  19. img-responsive in Bootstrap does not work
  20. In a bootstrap responsive page how to center a div
  21. Responsive Canvas in Bootstrap column?
  22. WordPress Admin Bar Overlapping Twitter Bootstrap Navigation [closed]
  23. Load custom css after bootstrap
  24. Redoing home page but changes not taking effect
  25. Layout using Bootstrap not aligning correctly
  26. Bootstrap in theme
  27. create bootstrap columns inside editor group block
  28. Google yolo one tab signup plugin avilable in wordpress? [closed]
  29. CSS – Initial HTML Margin Issue On WordPress Site
  30. How to remove the gap on right side of webpage (using Bootstrap with WordPress)?
  31. All of my custom Bootstrap styles are not working in my child theme!
  32. How to integrate Bootstrap Grid System in WordPress
  33. Change class names dynamically added to html elements by wordpress
  34. Modal dialog under the backdrop
  35. Bootstrap News: Image Modifciation
  36. Can’t center post thumbnail with bootstrap [closed]
  37. Bootstrap 4 Optimization
  38. Parent style messing up with Bootstrap [closed]
  39. Bootstrap navbar-fixed-top issues [closed]
  40. How to make this splash page responsive
  41. Custom theme – Bootstrap CSS not loading via wp_enqueue_style or otherwise
  42. “Stray start tag footer” in html validator?
  43. draw diagonal lines in div background with CSS
  44. Why are my CSS3 media queries not working on mobile devices?
  45. CSS3 Transition – Fade out effect
  46. How to give spacing between buttons using bootstrap
  47. sass :first-child not working
  48. Hex colors: Numeric representation for “transparent”?
  49. Iframe’s overflow problem
  50. Show / hide div on click with CSS
  51. CSS to select/style first word
  52. sizing div based on window width
  53. Enqueue Google Web Fonts Without Messing Up Symbols In URL
  54. How to modify/extend/override a core method?
  55. Adding style sheet to specific page
  56. How do I add a class to that is generated by >
  57. How to add a body class to all interior pages except the homepage
  58. add a CSS id to the body of a page in wordpress
  59. Can I use theme options to change two things at once?
  60. Possible to include ACF text field within inline style tag?
  61. wp_head function causes 30px blank space [closed]
  62. Include print style sheet
  63. De-registering a CSS file leaves it in the queue
  64. WooCommerce change number of columns in the frontpage
  65. How to add an RSS logo to my blogs header?
  66. How does W3 Total Cache Load Images In Stylesheet via CDN? [closed]
  67. images within style sheet
  68. IE and WordPress
  69. Child theme stylesheet not always overriding “index”
  70. Alternate stylesheet only works with absolute address for link?
  71. How to create an optionally available stylesheet for visually impared users?
  72. Image getting out of container [closed]
  73. Why is my child theme style.css not found (404) in the front-end? [closed]
  74. functions.php – inject inline css from file
  75. Changing navigation strip color with CSS
  76. Use Google Fonts and unicodes
  77. Conditionally print css style in WordPress
  78. WordPress is not displaying CSS file
  79. Page versus post ID specific CSS ID?
  80. Css will not display in webpage, after adding it in style.css in child theme
  81. Hide Tab Titles from Tabs Block
  82. Hide product variations at home page
  83. TinyMCE on frontend style not working
  84. Bootstrap Integtration
  85. H2 On Blog/Article Page Gets Assigned a Class
  86. HTML not resizing
  87. Make Responsive Specific Page in WordPress
  88. How to get homepage div container of wordpress website to display full width? [duplicate]
  89. CSS in child theme to replace !important in parent theme
  90. WP theme update causes child theme CSS problems
  91. adding a favicon to site2 – site1/site2/favicon.ico
  92. WordPress crop image not working [closed]
  93. Which files can be replaced in a child theme?
  94. How do i make a sidebar background color? [closed]
  95. How to remove audio player styles added by mediaelement.js JavaScript?
  96. CSS messes up when CACHE is cleared
  97. Twenty Fourteen Theme – Moving left sidebar to the right
  98. WordPress doesn’t respect “ver” parameter in styles [closed]
  99. Image is very blurry
  100. how to change the colour of this background

Leave a Comment