Add background color to box of checkbox with Javascript

Question

I have an issue with coloring the check boxes of the checkbox element in my project. I create checkboxes dynamically and when I create a new one, I would like to give its check box a new random color. I would like to style those boxes with my function, which returns the randomly generated color in hex code. That works, but the only thing that keeps bothering me, is how to apply this new color (in hex format it is like: "#FFFFFF") to the checkbox? I tried with different varieties but ended with no success. I want to solve this issue with Javascript if it is possible.

I would like to have those checkboxes like lets say Google Calendar has to check, which calendars you would like to see.

Any suggestions?

See this answer : http://stackoverflow.com/a/7398527/5119765 — ADreNaLiNe-DJ, Apr 06 '16 at 08:18
Possible duplicate of [How to style checkbox using CSS?](http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css) — ADreNaLiNe-DJ, Apr 06 '16 at 08:19
As you generate the new checkbox dynamically add a checkbox.style.backgroundColor = '#yourhexcode'; before you append it to the DOM — noa-dev, Apr 06 '16 at 08:19
This is not possible using the standard HTML checkbox control. You would need to implement a third party checkbox control. — Rory McCrossan, Apr 06 '16 at 08:22
If you don't mind adding 3rd party plugins, I recommend [iCheck](http://icheck.fronteed.com/) — apokryfos, Apr 06 '16 at 08:27
@ADreNaLiNe-DJ hey man. i did try with it. but didnt had the desired effect. — Simon, Apr 06 '16 at 10:58
@noa-dev tryed with it, before i posted this question and sadly didn't had success with it. — Simon, Apr 06 '16 at 10:59

score 1 · Answer 1 · answered Apr 06 '16 at 08:25

You can't set the background color of a checkbox.

A possible solution is to create a 'custom' checkbox with CSS and a HTML label.

The trick is to hide the checkbox. The label for the checkbox gets a ::before psuedo element which you can style. Now when the checkbox is checked (which is possible due to the label), you update the style of the ::before pseudo element.

A very basic example:

.custom-cb {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: none;
  clip: rect(0 0 0 0);
}

.custom-cb + label::before {
  content: '';
  width: 10px;
  height: 10px;
  margin-right: 5px;

  display: inline-block;;
  background: crimson;
}

.custom-cb:checked + label::before {
  background: #2BED14;
}

Demo: https://jsfiddle.net/j43djbsd/1/

But how are you going to specify a dynamic color (from his function)? not sure if there is a way where you can edit the css style of a pseudo element. — KiiroSora09, Apr 06 '16 at 08:29

score 1 · Accepted Answer · answered Apr 06 '16 at 09:59

Maybe you could try this:

Please customize CSS where needed.

$.fn.cbColor = function(color) {
 color = color || '#f00';
  
 this
  .addClass('cb')
  .before('<div class="cb-box" style="background:' + color + ';"></div>');
  
  return this;
};

// Apply color to existing checkboxes
$(':checkbox').cbColor('#fd0');

$('#container').append('<br>');

// Apply color for dynamic elements
var $newCb = $('<input id="custom"type="checkbox">'),
$newCb2 = $('<input id="custom2"type="checkbox">');

$newCb
.appendTo('#container')
.after('<label for="custom">custom</label><br>')
.cbColor('#fdf');

$newCb2
.appendTo('#container')
.after('<label for="custom2">custom2</label><br>')
.cbColor('#f00');

.cb {
  display: none;
}

.cb-box {
  width: 14px;
  height: 14px;
  display: inline-block;
}

.cb + label::before {
  content: '\0000a0';
  margin-right: 0px;
}

.cb:checked + label::before {
  content: '\2714';
  margin-left: -12px;
  margin-right: 6px;
  font-size: 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <input id="cb1" type="checkbox"><label for="cb1">1</label><br>
  <input id="cb2" type="checkbox"><label for="cb2">2</label><br>
  <input id="cb3" type="checkbox"><label for="cb3">3</label><br>
  <input id="cb4" type="checkbox"><label for="cb4">4</label><br>
  <input id="cb5" type="checkbox"><label for="cb5">5</label><br>
  <input id="cb6" type="checkbox"><label for="cb6">6</label><br>
  <input id="cb7" type="checkbox"><label for="cb7">7</label><br>
  <input id="cb8" type="checkbox"><label for="cb8">8</label><br>
  <input id="cb9" type="checkbox"><label for="cb9">9</label>
</div>

Hey man. Actually that one worked. I just edited a bit for my case and works as i wanted. i thank you! :) — Simon, Apr 06 '16 at 11:00

Add background color to box of checkbox with Javascript

2 Answers2