CSS Form Checkbox Styling with Checked and After Tags

css form checkbox styling with checked and after tags

The cross-browser solution that worked for me was to include an empty label (with class "checkbox_label") after the checkbox input and then style IT rather than the checkbox.

input[type=checkbox] + label:after
{
  content: url(images/unchecked_after.gif);
  position:relative;
  left:0px;
  top:1px;
  z-index:100;
}

input[type=checkbox]:checked + label:after
{
  content:"";
}

.checkbox_label
{
  height:0px;
  width:0px;
  display:inline-block;
  float:left;
  position:relative;
  left:20px;
  z-index:100;
}

Changing the Style of a specific element by Checkbox:Checked

There is a way to make this happen, but it's to use exactly the same "trick" with which you style the <label> elements, specifically by moving the <input> elements ahead of the element you wish to style.

With that in mind, if the <input> elements are preceding siblings of the <div>, then checking, and unchecking, the <input> can have an effect on the <div>, and also the original <label> elements as well.

As a crude example:

input[type="checkbox"][name^="vehicle"] {
  display: absolute;
  position: absolute;
  opacity: 0;
}

/* styles the <div> based on the checked/unchecked state
   of the <input> (this example assumes that the same
   highlight colour should be used regardless of which
   <input> is checked: */
input[type="checkbox"][name^="vehicle"]:checked ~ div {
  background-color: #ccc;
}

/* this is where it becomes obvious that JavaScript (or,
   ideally, a CSS selector that can refer to an attribute-
   variable) makes more sense; though with a CSS
   pre-processor this can be written effectively enough.
   Here when the #vehicle1 element is checked the <label>
   descendents with a "for" attribute equal to "vehicle1" of
   later-sibling <ul> elements are selected and styled: */
#vehicle1:checked~ul label[for=vehicle1] {
  background-color: gray;
}

/* as above, for the "vehicle2" id and for attributes: */
#vehicle2:checked~ul label[for=vehicle2] {
  background-color: gray;
}

#vehicle3:checked~ul label[for=vehicle3] {
  background-color: gray;
}

ul li {
  display: inline-block;
  padding: 20px;
  margin: 20px;
}

ul li label {
  padding: 20px;
  cursor: pointer;
}

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<div class="modify-box">
  BOX TO CHANGED
</div>
<ul>
  <li>
    <label for="vehicle1"> Bike</label><br>
  </li>
  <li>
    <label for="vehicle2"> Car</label><br>
  </li>
  <li>
    <label for="vehicle3"> Boat</label><br>
  </li>
</ul>

How to select label for checked checkbox using CSS?

You only need to change the HTML and selector. In CSS the label doesn't know if the checkbox is checked so you have to turn it around.

input.chkCountry[type="checkbox"]:checked + label  {color:green;}
/*input:checked + label  {color:green;} /* Short selector */

<ul class="chkbox">
  <li>
    <input type="checkbox" class="chkCountry" id="chkCC_AF" name="chk_AF" value="AF" checked="checked">   
    <label class="lblCountry" for="chkCC_AF">Afghanistan</label>
  </li>
  <li>
    <input type="checkbox" class="chkCountry" id="chkCC_AL" name="chk_AL" value="AL">
    <label class="lblCountry" for="chkCC_AL">Albania</label>
  </li>
  <li>
    <input type="checkbox" class="chkCountry" id="chkCC_DZ" name="chk_DZ" value="DZ">
    <label class="lblCountry" for="chkCC_DZ">Algeria</label>
  </li>
    <li><input type="checkbox" class="chkCountry" id="chkCC_AS" name="chk_AS" value="AS">
    <label class="lblCountry" for="chkCC_AS">American Samoa</label>
  </li>
</ul>

Styling all unchecked checkboxes after an item is selected

Here is an updated jsfiddle. All I added was:

$("input[type=radio]").click(function(){
    $("input[type=radio]:checked+label").css("opacity", "1");
  $("input[type=radio]:not(:checked)+label").css("opacity", "0.5");
});

The code simply uses jquery to detect when you click a radio button and then sets opacity to 1 while setting the others to 0.5

CSS update :after when input is checked

There is no sibling element to input tag so using of ~ will not work. You either need to add a sibling element to input tag or add a class to label element. Since, you can't change the HTML the solution is possible only with JavaScript where you have to add a class to label element when input is checked.

input.addEventListener('change', function(){
    var type = this.checked? "add": "remove";
    this.parentElement.classList[type]('checked');
}

And in CSS:

label{
    &.checked::after{  /* instead of "input:checked ~ &:after" */
     /* checked styles here */
    }
}

BTW, it is always a better strategy to keep an empty element adjacent to input tag (because input can't have pseudo elements). So, you won't end up in situations like this :)

CSS change a class display by checking some checkbox

~ only works for the downward siblings which are below the element #test. #title is above #test, so that's why your styles do not apply.

If you don't want to change element positions, and still want to use ~, you can move #title up for style application, and then use the reverse directions of the flexbox to show #title is above #test (only in display).

For multiple h1 case, you also need to add them below #test checkbox

<html lang="pt-br">

<body>
  <style>
    #test:checked~div > #title {
      display: none;
    }
    
    .reverse-flexbox {
      display: flex;
      flex-direction: column-reverse;
      align-items: flex-start;
    }
  </style>
  <div>
     <div class="reverse-flexbox">
       <input type="checkbox" id="test" />
       <div>
          <h1 id="title">Just a text 1</h1>
       </div>
       <div>
          <h1 id="title">Just a text 2</h1>
       </div>
       <div>
          <h1 id="title">Just a text 3</h1>
       </div>
     </div>
     <div>Something else</div>
  </div>
</body>

</html>

Checkbox CSS :checked styling

You need to change all checked selectors to this:

input[type="checkbox"]:checked + .check-box-effect:before

label {  display: inline-block;  color: #fff;  cursor: pointer;  position: relative;}
label .check-box-effect {  display: inline-block;  position: relative;  background-color: transparent;  width: 25px;  height: 25px;  border: 2px solid #dcdcdc;  border-radius: 10%;}
label .check-box-effect:before {  content: "";  width: 0px;  height: 2px;  border-radius: 2px;  background: #626262;  position: absolute;  transform: rotate(45deg);  top: 13px;  left: 9px;  transition: width 50ms ease 50ms;  transform-origin: 0% 0%;}
label .check-box-effect:after {  content: "";  width: 0;  height: 2px;  border-radius: 2px;  background: #626262;  position: absolute;  transform: rotate(305deg);  top: 16px;  left: 10px;  transition: width 50ms ease;  transform-origin: 0% 0%;}
label:hover .check-box-effect:before {  width: 5px;  transition: width 100ms ease;}
label:hover .check-box-effect:after {  width: 10px;  transition: width 150ms ease 100ms;}
input[type="checkbox"] {  display: none;}
input[type="checkbox"]:checked + .check-box-effect {  background-color: red !important;  transform: scale(1.25);}
input[type="checkbox"]:checked + .check-box-effect:after {  width: 10px;  background: #333;  transition: width 150ms ease 100ms;}
input[type="checkbox"]:checked + .check-box-effect:before {  width: 5px;  background: #333;  transition: width 150ms ease 100ms;}
input[type="checkbox"]:checked:hover + .check-box-effect {  background-color: #dcdcdc;  transform: scale(1.25);}
input[type="checkbox"]:checked:hover + .check-box-effect:after {  width: 10px;  background: #333;  transition: width 150ms ease 100ms;}
input[type="checkbox"]:checked:hover + .check-box-effect:before {  width: 5px;  background: #333;  transition: width 150ms ease 100ms;}

<label>               <input type="checkbox" id="chkProdTomove"  />          <span class="check-box-effect"></span>        </label>

How to style a checkbox using CSS

UPDATE:

The below answer references the state of things before widespread availability of CSS 3. In modern browsers (including Internet Explorer 9 and later) it is more straightforward to create checkbox replacements with your preferred styling, without using JavaScript.

Here are some useful links:

• Creating Custom Form Checkboxes with Just CSS
• Easy CSS Checkbox Generator
• Stuff You Can Do With The Checkbox Hack
• Implementing Custom Checkboxes and Radio Buttons with CSS3
• How to Style a Checkbox With CSS

It is worth noting that the fundamental issue has not changed. You still can't apply styles (borders, etc.) directly to the checkbox element and have those styles affect the display of the HTML checkbox. What has changed, however, is that it's now possible to hide the actual checkbox and replace it with a styled element of your own, using nothing but CSS. In particular, because CSS now has a widely supported :checked selector, you can make your replacement correctly reflect the checked status of the box.

---

OLDER ANSWER

Here's a useful article about styling checkboxes. Basically, that writer found that it varies tremendously from browser to browser, and that many browsers always display the default checkbox no matter how you style it. So there really isn't an easy way.

It's not hard to imagine a workaround where you would use JavaScript to overlay an image on the checkbox and have clicks on that image cause the real checkbox to be checked. Users without JavaScript would see the default checkbox.

Edited to add: here's a nice script that does this for you; it hides the real checkbox element, replaces it with a styled span, and redirects the click events.

---

Related Topics