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
– Doan Cuong, Commented Jun 10, 2014 at 7:41
Just to make this clearer - the checked 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
– Boaz, Commented Jun 10, 2014 at 7:41

Mr. Alien · Accepted Answer · 2014-06-10 07:47:00Z

17

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, 2014 at 7:47

answered Jun 10, 2014 at 7:36

Mr. Alien

158k36 gold badges307 silver badges287 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Boaz Over a year ago

By definition it shouldn't.

Jukka K. Korpela Over a year ago

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.

Mr. Alien Over a year ago

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

Laxmikant Dange · Accepted Answer · 2014-06-10 07:51:03Z

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, 2014 at 7:51

Laxmikant Dange

7,7386 gold badges43 silver badges67 bronze badges

Comments

AJ101 · Accepted Answer · 2014-06-10 07:50:30Z

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, 2014 at 7:50

AJ101

691 silver badge8 bronze badges

1 Comment

Boaz Over a year ago

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

Lynel Hudson · Accepted Answer · 2020-11-23 04:31:28Z

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>

Collectives™ on Stack Overflow

Uncheck a checkbox using CSS

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related