How to change elements opacity based on if checkbox is or is not checked with CSS only?


Tags: jquery,html,css,checkbox,checked

Problem :

I know that I could use .is(':checked') with jQuery, but is there a CSS way? I kind of would like to make this #navbar-checkbox:checked #mobile-nav { display: block; } bit of code work, as I know I could do something similar with :hover, but is there a way to do it with :checked ?

So the full markup:

CSS

#mobile-nav { display: none; }
#navbar-checkbox:checked #mobile-nav { display: block; }

That's really all I want.



Solution :

It would be helpful to see your markup, but it is possible.

For example, this assumes a checkbox that is adjacent (specified by the + combinator) to the element you want to target:

.test {
  background-color: red;
  color: white;
}

input[type="checkbox"]:checked + .test { opacity: 0.5; }
<input type="checkbox">
<div class="test">Test</div>


    CSS Howto..

    How to add text under every image?

    How to prevent (bootstrap) fixed top navigation from zooming on mobile

    How to align 3 child div in a parent div

    How to remove/close bootstrap css notification? [closed]

    Updating CSS via plain JavaScript… how do I update if the property uses vendor prefixes?

    How to use Open Sans font with cakePhp 3?

    How do I use a pre-defined CSS style for a programmatically drawn TextField?

    How do I apply CSS Transition to my responsive menu?

    How can I center my ul li list inside my div?

    How to set 2 images to be by the side of each other

    how to add border to image css on blogger

    How to Remove - Modify btn-inverse Top Border

    How to select the second th into the thead of a table having a specific ID using CSS?

    How to add dynamic CSS style sheet for single xhtml file

    Using Jquery to show and hide elements based on an input

    How to Slant/Skew only the bottom of the div

    How to set css error-styles programatically on a TextBox

    How to filter and show only applied CSS in Chrome Developer Tools (like Firebug in Firefox)

    How to style the tick mark checkbox using css without using images?

    how to create sprite with css [closed]

    How can I fade in a div on hover with jquery on top of image with animated rollover

    CSS how to hide resize divs while keeping it centerd

    How to make this type of image popping out of box using XHTML css

    How can I add background color to CSS triangles?

    How to build simple image rotation effect like this one in exapmle?

    How do I add an underline to unvisited links only?

    Using bootstrap, how do you get columns to clear properly?

    How do I keep my text on one line in Firefox?

    How to add CSS to a specific div class - WordPress

    How to select the second paragraph after another with css?