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?

This is not possible using the standard HTML checkbox control. You would need to implement a third party checkbox control. — Rory McCrossan
– Rory McCrossan, Commented Apr 6, 2016 at 8:22
If you don't mind adding 3rd party plugins, I recommend iCheck — apokryfos
– apokryfos, Commented Apr 6, 2016 at 8:27

KiiroSora09 · Accepted Answer · 2016-04-06 09:59:03Z

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! :)

Pimmol · Accepted Answer · 2016-04-06 08:25:47Z

1

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/

answered Apr 6, 2016 at 8:25

Pimmol

1,8911 gold badge10 silver badges14 bronze badges

1 Comment

KiiroSora09 Over a year ago

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.

Collectives™ on Stack Overflow

Add background color to box of checkbox with Javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related