Uncheck a checkbox using CSS - html

Question

For those not familiar, the checked attribute for a checkbox will accept any input as a sign to check the box. in fact, it doesnt need any text. so all these will check the box
<input type="checkbox" checked />
<input type="checkbox" checked="false">
<input type="checkbox" checked="">
<input type="checkbox" checked="0">
all those WILL check the box.
My problem is i am being handed a checked box, and need to uncheck it. I cant just change its value - that still makes it checked. i need to nuke it from orbit. This is incredibly easy to do with javascript or jQuery, but the site does not allow any of that in my CSS.
I read a list of about 100 attributes and how to reset them - auto, normal, 0, inherit, et cetera, but 'checked' was not on the list, and i tried all of those and anything i could think of, and this checkmark wont die.

Answer 1

The simple answer is NO, CSS cannot help you uncheck the checkbox..
BUT
You can use CSS to detect whether the input element is checked or not by using :checked and :not(:checked) ..
Test Case : Demo
HTML
<ul>
<li>
<input type="checkbox" checked />
<label for="">Checked</label>
</li>
<li>
<input type="checkbox">
<label for="">Unchecked</label>
</li>
<li>
<input type="checkbox" checked>
<label for="">Checked Again</label>
</li>
</ul>
CSS
input:checked + label {
color: green;
}
input:not(:checked) + label {
color: red;
}

Answer 2

CSS is not for dom manipulation, its for dom styling and arrangements, You can not set dom attributes from css but you can check for css conditions and set styles. :)

Answer 3

Its possible to check/uncheck checkbox using jquery. Here is the code:
$('#textCheckbox').attr('checked', true); // Enable CheckBox
$('#textCheckbox').attr('checked', false); // Disable CheckBox
After alteration, following will be the output of your input field
<input type="checkbox" id="textCheckbox" checked="checked" /> <!-- Checked -->
<input type="checkbox" id="textCheckbox" /> <!-- Unchecked -->
Fill free to mark correct answer if you think this is what you are looking at..

Answer 4

Question was asked 6 years ago but it should be noted you can give the appearance of an unchecked checkbox with CSS:
* {
margin: 0;
padding: 0;
font-family: Arial;
text-transform: capitalize;
}
html, body { padding: 1rem; }
input { display: none; }
label, label::after, hr, hr::after {
display: block;
overflow: visible;
position: relative;
transform: scale( 0.8 );
width: 1rem;
height: 1rem;
border-style: none;
border-radius: 0.125rem;
box-shadow: 0rem 0rem 0rem 0.0625rem #666;
content: '';
}
label::after, hr, hr::after {
transform: scale( 1.15 );
background-color: #07f;
box-shadow: none;
}
label::after { display: none; }
label:hover { box-shadow: 0rem 0rem 0rem 0.0625rem #222; }
label:hover::after { background-color: #06e; }
label:active::after { background-color: #18f; }
<style>
hr, hr::after {
position: absolute;
top: 0; left: 0.5rem;
z-index: 1;
transform: rotate( 40deg );
width: 0.225rem;
height: 0.9rem;
background-color: #fff;
border-radius: 0;
}
hr::after {
top: 0.6rem; left: -0.17rem;
transform: rotate( -90deg );
height: 0.4rem;
}
#one:checked ~ [ for='one' ]::after { display: block; }
[ for='two' ]::after { display: block; }
#one:checked ~ [ for='two' ]::after { display: none; }
</style>
<input type='checkbox' id='one'>
<input type='checkbox' id='two' checked>
<p>check me</p>
<label for='one'> <hr> </label>
<br>
<p>to uncheck me</p>
<label for='two'> <hr> </label>