changing checkbox style on uncheck

Question

I have a list of checkboxes in a page with all the boxes are checked by default. When user clicks on any particular checkbox to uncheck it, the background color of the checkbox should be changed or the boxes should be checked with cross mark in a red color.

I tried the following on uncheck,

document.getElementById("checkBooxId1").style = "background-color:red";

This is not working.

Also, I would like to do this on some occasion not all the time. So, when the parent checkbox is checked and the child is unchecked, the style of the unchecked checkebox should be different. Whereas, if the parent is also not checked, then the child and the parent should be in normal style.

Is there any other way?

Could you paste all the codes?It will help others to find the problem. — rubyu2
– rubyu2, Commented Aug 22, 2015 at 2:28
Form elements styling is not so easy, and you need bag of tricks: inserthtml.com/2012/06/custom-form-radio-checkbox — sinisake
– sinisake, Commented Aug 22, 2015 at 2:29

akinuri · Accepted Answer · 2015-08-22 05:00:13Z

As I said before, you can't change the background-color of a checkbox, but there are workarounds to get the desired effect.

Using JavaScript:

var defaultState = "checked";
var fakecboxes	 = document.getElementsByClassName("fakecbox");
for (var i = 0; i < fakecboxes.length; i++) {
	(function (i) {
		if (!fakecboxes[i].classList.contains(defaultState)) {
			fakecboxes[i].classList.add(defaultState);
		}
		fakecboxes[i].onclick = function () {
			if (!this.classList.contains("checked")) {
				this.classList.add("checked");
				this.classList.remove("unchecked");
			} else {
				this.classList.remove("checked");
				this.classList.add("unchecked");
			}
		};
	})(i);
}

body {
	user-select: none;
	-webkit-user-select: none;
}
.fakecbox {
	width: 12px;
	height: 12px;
	box-sizing: border-box;
	margin: 3px;
	margin-left: 4px;
	display: inline-block;
	position: relative;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
	background-color: rgb(222, 222, 222);
	background: linear-gradient(to bottom, rgb(243, 243, 243) 0%, rgb(224, 224, 224) 40%, rgb(224, 224, 224) 100%);
	border-radius: 2px;
	border-width: 1px;
	border-style: solid;
	border-top-color: rgb(178, 178, 178);
	border-left-color: rgb(167, 167, 167);
	border-right-color: rgb(167, 167, 167);
	border-bottom-color: rgb(167, 167, 167);
}
.fakecbox:hover {
	border-top-color: rgb(168, 168, 168);
	border-left-color: rgb(157, 157, 157);
	border-right-color: rgb(157, 157, 157);
	border-bottom-color: rgb(157, 157, 157);
	box-shadow: 0 1px 0 rgba(0, 0, 0, .125);
	background: linear-gradient(to bottom, rgb(244, 244, 244) 0%, rgb(226, 226, 226) 40%, rgb(226, 226, 226) 100%);
}
.fakecbox:active {
	border-top-color: rgb(173, 173, 173);
	border-left-color: rgb(161, 161, 161);
	border-right-color: rgb(161, 161, 161);
	border-bottom-color: rgb(161, 161, 161);
	background: linear-gradient(to bottom, rgb(231, 231, 231) 0%, rgb(213, 213, 213) 40%, rgb(213, 213, 213) 100%);
	box-shadow: none;
}
.fakecbox.checked::after {
	content:"";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAAM1BMVEX///9CQkJERERMTExPT09WVlZZWVlfX19gYGBlZWVmZmZpaWlra2txcXFycnJzc3N6enq1N2u5AAAAAXRSTlMAQObYZgAAAC5JREFUeAElwYcRACEMwDD7eyHA/tNyuUiUj3JtB+nXBp2pAx5PvYFQd9KrlCAtF1AAoT8ZlaoAAAAASUVORK5CYII=);
	background-repeat: no-repeat;
	background-position: center;
}
.fakecbox.red {
	background: rgba(255,0,0,.4);
	border: 1px solid rgba(200,0,0,.5);
}
.fakecbox.redonuncheck.unchecked {
	background: rgba(255,0,0,.4);
	border: 1px solid rgba(200,0,0,.5);
}

<input type="checkbox" />Normal checkbox
<br>
<div class="fakecbox"></div>Fake checkbox
<br>
<div class="fakecbox red"></div>Fake red checkbox
<br>
<div class="fakecbox redonuncheck"></div>Fake red-on-uncheck checkbox

This one using only CSS. You can remove the last label <label for="cbox">Normal checkbox</label>. Checkbox still works. You can modify the span for unchecked state and input:checked + span for checked state.

.checkbox input {
	display: none;
}
.checkbox span {
	width: 20px;
	height: 20px;
	display: inline-block;
	background-color: red;
}
.checkbox input:checked + span {
	background-color: lime;
}

<label class="checkbox">
    <input type="checkbox" name="checkbox"/>
    <span></span>
</label>
<label for="checkbox">Normal(modified) checkbox</label>

DivideByZero · Accepted Answer · 2015-08-22 02:52:50Z

2

http://jsfiddle.net/2ck4tfj3/1/

input[type=checkbox] {
    position: relative;
}
input[type=checkbox].awesome::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: red;
}

and just use this to change the background to red dynamically: document.getElementById("checkbox1").className = "awesome";

I used CSS pseudo elements to style the input checkboxes when they have the class awesome. You can change whether an element has this class with JavaScript.

edited Aug 22, 2015 at 2:52

answered Aug 22, 2015 at 2:28

DivideByZero

5454 silver badges14 bronze badges

7 Comments

user1578872 Over a year ago

Yes, I am able to uncheck or check using this id.

akinuri Over a year ago

Even though the code is correct, you can't change the background-color of a checkbox.

user1578872 Over a year ago

Is there any other way to do some styling on uncheck event?

DivideByZero Over a year ago

You could use CSS psuedo elements like ::after or ::before and style those. Or, you could put a <div> after the checkbox and style that.

user1578872 Over a year ago

I want to do that only when the checkbox is unchecked and it should be reverted to the normal style on checking again.

|

Gabriel Chan · Accepted Answer · 2015-08-22 02:47:31Z

you can use CSS psuedo elements.

The :checked pseudo-class in CSS selects elements when they are in the selected state. It is only associated with input () elements of type radio and checkbox . The :checked pseudo-class selector matches radio and checkbox input types when checked or toggled to an on state. If they are not selected or checked, there is no match.

So when a checkbox is checked, and you are targeting the label immediately after it:

CSS:

input[type=checkbox] + label {
color: #ccc;
font-style: italic;
} 
input[type=checkbox]:checked + label {
color: #f00;
font-style: normal;
}

The label text will turn from grey italic to red normal font.

HTML:

<input type="checkbox" id="ossm" name="ossm"> 
<label for="ossm">CSS is Awesome</label>

Taken from CSS-Tricks

Hope this helps

Collectives™ on Stack Overflow

changing checkbox style on uncheck

3 Answers 3

Comments

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related