0

I'm using a bootstrap table with data show columns = true. When rendering, the checkbox is blue which does not match my theme - how can I override this color?

table code: 

<table id="products" class="nowrap" cellspacing="0"
  data-toggle="table"
  data-show-columns="true"
  data-show-refresh="true" 
  data-pagination="true"
  data-search="true"          
  >

have tried the following CSS override - adding the background color to this tag but the checkbox still renders blue.

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"); 
  background-color:#f48622;
}

image

Andrei Tanana
  • 7,932
  • 1
  • 27
  • 36
ElizabethPeckham
  • 1
  • Can you please provide [minimal reproducible code](https://stackoverflow.com/help/minimal-reproducible-example)? – yinsweet May 21 '20 at 21:45
  • Does this answer your question? [How to style a checkbox using CSS](https://stackoverflow.com/questions/4148499/how-to-style-a-checkbox-using-css) – Elysian Storm May 21 '20 at 21:56
  • unfortunately no; the checkbox is generated by the table call - so I can't control it with css - I have reset the bootstrap with my main color as the primary - and checkboxes are still rendering blue. I'm starting to think the styling is set somewhere other than the bootstrap code. I have gone through the bootstrap-table-min code as well and don't see a way to change the checkbox color. – ElizabethPeckham May 22 '20 at 15:35

0 Answers0