Styling a checkbox on unchecked (with bootstrap)

Question

I am tryng to style a checkbox in a simple form with bootstrap styles, based on the criteria if it's checked or unchecked. However it does not work for some reason. The span elements that carry styling do not recieve styling for checked and unchecked states. Please note, this form repeats on the page multiple times, with the input element keeping the same id and name (however, if it appears only once it still doesn't work)

input[type='button'].icon-checkbox {
  display: none
}

input[type='checkbox'].icon-checkbox {
  display: none;
}

input[type='checkbox'].icon-checkbox+label .unchecked {
  display: inline-block;
}

input[type='checkbox'].icon-checkbox+label .checked {
  display: none;
}

input[type='checkbox']:checked.icon-checkbox {
  display: none
}

input[type='checkbox']:checked.icon-checkbox+label.unchecked {
  display: none
}

input[type='checkbox']:checked.icon-checkbox+label .checked {
  display: inline-block
}

<form style="display: block;" id="commentary_14">
  <label for="id_is_anonymous">
    <span classname="checkbox-label-text">Stay Anonymous</span>             
    <span title="Remain Anonymous" class="hvr-grow pointer orange glyphicon glyphicon-unchecked unchecked px18"></span>             
    <span title="Contribute with your username" class="hvr-grow pointer orange glyphicon glyphicon-check checked px18"></span>
  :</label>
  <input type="checkbox" name="is_anonymous" id="id_is_anonymous" checked="" class="icon-checkbox"> (...)
</form>

Jennifer Goncalves created a fiddle, thanks for that (I know about fiddles but just never setuped one myself). As you can see, two checkboxes appear one checked and one unchecked. However they are unclickable, don't change the state and also, only one should appear based on the state of the input.

working fiddle

Answer 1

There are two issues going on here. First, you cannot go backwards in CSS. So when you use the + operator, you have to have the elements in the order you are writing them.

Because you have your code written like this:

input[type='checkbox'].icon-checkbox + label

...you need to have the input field physically above the label as a sibling. Alternatively, you can swap your CSS around.

The second issue is a typo in your CSS.

This line is missing a space:

input[type='checkbox']:checked.icon-checkbox+ label.unchecked{display:none}

...and should be:

input[type='checkbox']:checked.icon-checkbox + label .unchecked{display:none}

Without a space between the label and .unchecked, your code is looking for a label with the class of unchecked, versus a child with the class of unchecked.

The final code functions like this.

HTML:

<form style="display: block;" id="commentary_14">
    <input type="checkbox" name="is_anonymous" id="id_is_anonymous" checked="" class="icon-checkbox">
    <label for="id_is_anonymous">
        <span classname="checkbox-label-text">Stay Anonymous</span>
        <span title="Remain Anonymous" class="hvr-grow pointer orange glyphicon glyphicon-unchecked unchecked px18"></span>
        <span title="Contribute with your username" class="hvr-grow pointer orange glyphicon glyphicon-check checked px18"></span> :
    </label>
    (...)
</form>

CSS:

input[type='button'].icon-checkbox {
  display: none
}

input[type='checkbox'].icon-checkbox {
  display: none;
}

input[type='checkbox'].icon-checkbox+label .unchecked {
  display: inline-block;
}

input[type='checkbox'].icon-checkbox+label .checked {
  display: none;
}

input[type='checkbox']:checked.icon-checkbox {
  display: none
}

input[type='checkbox']:checked.icon-checkbox+ label .unchecked {
  display: none
}

input[type='checkbox']:checked.icon-checkbox+ label .checked {
  display: inline-block
}

JSfiddle Example: https://jsfiddle.net/jennifergoncalves/eh21d8bd/

Answer 2

This example help you...

/* The customcheck */
.customcheck {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.customcheck input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 5px;
}

/* On mouse-over, add a grey background color */
.customcheck:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.customcheck input:checked ~ .checkmark {
    background-color: #02cf32;
    border-radius: 5px;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.customcheck input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.customcheck .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

<div class="container">
	<h1>Custom Checkboxes</h1></br>
	
        <label class="customcheck">One
          <input type="checkbox" checked="checked">
          <span class="checkmark"></span>
        </label>
        <label class="customcheck">Two
          <input type="checkbox">
          <span class="checkmark"></span>
        </label>
        <label class="customcheck">Three
          <input type="checkbox">
          <span class="checkmark"></span>
        </label>
        <label class="customcheck">Four
          <input type="checkbox">
          <span class="checkmark"></span>
        </label>
</div>

Answer 3

Try this:

input[type=checkbox] {
  display: none;
}
input[type=checkbox] + label #unchecked {
   display: inline-block;
}
input[type=checkbox] + label #checked {
   display: none;
}
input[type=checkbox]:checked + label #unchecked {
   display: none;
}
input[type=checkbox]:checked + label #checked {
   display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form style="display: block;" id="commentary_14">
      <input type="checkbox" name="is_anonymous" id="id_is_anonymous" checked="" class="icon-checkbox"> 
      <label for="id_is_anonymous">
            <span classname="checkbox-label-text">Stay Anonymous</span>:        
            <span title="Remain Anonymous" class="hvr-grow pointer orange glyphicon glyphicon-unchecked unchecked px18" id="unchecked"></span>             
            <span title="Contribute with your username" class="hvr-grow pointer orange glyphicon glyphicon-check checked px18" id="checked"></span>
      </label>
</form>

Answer 4

HTML

<form style="display: block;" id="commentary_14">
  <input type="checkbox" name="is_anonymous" id="id_is_anonymous" checked="" class="icon-checkbox">
      <label for="id_is_anonymous">
            <span classname="checkbox-label-text">Stay Anonymous</span>             
            <span title="Remain Anonymous" class="hvr-grow pointer orange glyphicon glyphicon-unchecked unchecked px18"></span>             
            <span title="Contribute with your username" class="hvr-grow pointer orange glyphicon glyphicon-check checked px18"></span>
      :</label>

 (...)    
</form>

CSS

input[type='checkbox'].icon-checkbox{display:none;} 

input[type='checkbox'].icon-checkbox+label .unchecked{display:inline-block;}
input[type='checkbox'].icon-checkbox+label .checked{display:none;}

input[type='checkbox'].icon-checkbox:checked+ label .unchecked{display:none}
input[type='checkbox'].icon-checkbox:checked+ label .checked{display:inline-block}

codepen link hope this works..