Uncheck a checkbox using CSS

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.

`checked` is not a `style attribute` so that you can't modify it by using css — Doan Cuong, Jun 10 '14 at 07:41
Just to make this clearer - the `checked` attribute is a [boolean attribute](http://stackoverflow.com/questions/4139786/what-does-it-mean-in-html-5-when-an-attribute-is-a-boolean-attribute), which means its very presence in the markup indicates a true value, regardless of the "value" it's given. — Boaz, Jun 10 '14 at 07:41

Mr. Alien · Answer 1 · 2014-06-10T07:47:00.897

14

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;
}

edited Jun 10 '14 at 07:47

answered Jun 10 '14 at 07:36

Mr. Alien

153,751
34
298
278

2

By definition it *shouldn't*. – Boaz Jun 10 '14 at 07:37
3

The question is about unchecking a checkbox, so it’s not relevant to suggest methods that just use the checkness state in styling. It can even be somewhat confusing. – Jukka K. Korpela Jun 10 '14 at 08:59
@JukkaK.Korpela I've the word **detect** written in bold, should be enough for a user to understand that still CSS cannot uncheck a checkbox ... :) – Mr. Alien Jun 10 '14 at 09:01

score 4 · Answer 2 · answered Jun 10 '14 at 07:51

4

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

answered Jun 10 '14 at 07:51

Laxmikant Dange

7,606
6
40
65

score 0 · Answer 3 · answered Jun 10 '14 at 07:50

0

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..

answered Jun 10 '14 at 07:50

AJ101

69
1
8

1

I'm afraid the OP specifically states *This is incredibly easy to do with javascript or jQuery, but the site does not allow any of that in my CSS*. Also, even if this was relevant, you should be using the `.prop()` method and not `.attr()`. – Boaz Jun 10 '14 at 08:18

Lynel Hudson · Answer 4 · 2020-11-23T04:31:28.313

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>

Uncheck a checkbox using CSS

4 Answers4

Linked