CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
Simon
Simon

Reputation: 178

Add background color to box of checkbox with Javascript

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.

enter image description here

Any suggestions?

Upvotes: 0

Views: 2330

Answers (2)

KiiroSora09
KiiroSora09

Reputation: 2287

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>

Upvotes: 1

Pimmol
Pimmol

Reputation: 1871

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/

Upvotes: 1

Related Questions