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. What’s the difference between SCSS and Sass?
  43. Can I change Bootstrap button color?
  44. How am I supposed to use index.html?
  45. Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3
  46. Adding border to SVG image
  47. What does !important mean in CSS?
  48. Set line spacing
  49. Remove blue underline from link
  50. CSS Background Opacity [duplicate]
  51. Outline effect to text
  52. Making a
  53. React.js inline style best practices [closed]
  54. What is a user agent stylesheet?
  55. What is a user agent stylesheet?
  56. Is there a CSS parent selector?
  57. CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page
  58. Vertically align text within a div
  59. How to align a
  60. Animate the overflow property
  61. Is there a color code for transparent in HTML?
  62. multiple classes on single element html
  63. CSS opacity only to background color, not the text on it?
  64. How do I center floated elements?
  65. create a white rgba / CSS3
  66. Using CSS for a fade-in effect on page load
  67. Gradient borders
  68. Superscript in CSS only?
  69. How to style a checkbox using CSS
  70. What is WebKit and how is it related to CSS?
  71. What’s the difference between display:inline-flex and display:flex?
  72. Making an iframe responsive
  73. Vertical Align Center in Bootstrap
  74. How can I invert color using CSS?
  75. How to insert spaces/tabs in text using HTML/CSS
  76. font-family is inherit. How to find out the font-family in chrome developer pane?
  77. How to get these two divs side-by-side?
  78. How can I vertically center a “div” element for all browsers using CSS?
  79. What does auto do in margin: 0 auto?
  80. How to change the color of an svg element?
  81. Changing spacing between paragraphs and inside of paragraphs
  82. Is there a color code for transparent in HTML?
  83. Bootstrap Dropdown menu is not working
  84. How to vertically align an image inside a div
  85. How can I center an absolutely positioned element in a div?
  86. What is sr-only in Bootstrap 3?
  87. Nesting CSS classes
  88. Applying Comic Sans Ms font style
  89. “Stray start tag footer” in html validator?
  90. Make div scrollable
  91. Failed to decode downloaded font, OTS parsing error: invalid version tag + rails 4
  92. Chrome give error **Failed to load resource: net::ERR_NAME_NOT_RESOLVED** while other browser load images
  93. What is the difference between the selectors “.class.class” and “.class .class”?
  94. CSS: Creating textured backgrounds
  95. Insert image after each list item
  96. How to make the HTML link activated by clicking on the
  97. ?
  98. How to change text transparency in HTML/CSS?
  99. How do I hide the bullets on my list for the sidebar?
  100. How does the data-toggle attribute work? (What’s its API?)
  101. limitations of using @Html.EditorForModel

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)