How can I apply styles to a label whose checkbox is checked using only CSS?


Tags: html,css,css3,checkbox,styles

Problem :

Let's say I have a basic webpage:

<LABEL ID="THE_LABEL" FOR="THE_CHECKBOX"><INPUT TYPE=checkbox ID="THE_CHECKBOX"/> Blue when checked!</LABEL>

Now let's say that I want the label text to be red when it's unchecked and blue when it's checked. How would I do this? I want something as basic as the following. Here, I use a hypothetical operator "<", which would mean "has the child", but of course it won't work, as there's no such operator:

#THE_LABEL{
  color:red;
}
#THE_LABEL < #THE_CHECKBOX[checked]{
  color:blue;
}

Everything but the theoretical "<" is valid CSS, which makes me wonder if there's a real way to achieve this behavior. Does anyone know of a valid CSS 3 (or lower version) way to style a label based on the state of its checkbox, without using JavaScript?



Solution :

You shouldn't be putting the input field within the label.

Since the contents of the label appear after the checkbox, just make your HTML this way:

    <INPUT TYPE=checkbox ID="THE_CHECKBOX"/> 
    <LABEL ID="THE_LABEL" FOR="THE_CHECKBOX">Blue when checked!</LABEL>

​

And then use this CSS:

#THE_LABEL {
    color: red;
}

#THE_CHECKBOX:checked + #THE_LABEL {
    color: blue;
}​

Live demo

The + is a sibling selector. It is not supported by IE8 and below.


    CSS Howto..

    how to change css style for every second data (picture) from database?

    How do I change the Mailchimp subscribe button color using inline CSS?

    How can I use themeroller'ed styles in “regular” parts of a page?

    How to insert css code in php?

    How to get Bootstrap grid spans narrower than span1?

    How to add a sliding div to these CSS Message Bubbles?

    how to get a rounded corner table with a body in different color with CSS?

    DIV Background Image Doesn't Show in Firefox or Chrome (But only online). Online it works for IE?

    How do I make an entire
  • element a link?
  • How to define the css :hover state in a jQuery selector?

    How to get CSS height value (rather than calculated height) in jQuery

    How to select multiple items using mouse click?

    AngularJS: How to unselect a span when selecting another

    how to make css tooltip not push elements outline in FF

    How to make non standard shape buttons, non clickable outside of it's border

    How to make smooth animation in css?

    How do I overlay a gradient (background) on top of a border?

    How do I make my background-color fill entire width of div when applied to a `ul li`?

    How to align div in body to stay with specific height and width

    How can I shift up a div and all divs that follow it?

    How to achieve this layout with CSS and div?

    How to align 2 content blocks horizontally in css without using s
    If you can change your markup, just one line of CSS is enough to achieve this through flexbox. Wrap both the items inside a parent container. Set display: flex to...
    Read more

    How can I expand this tag?

    how would i get the headline to fade in and move up very slightly on page load with css

    How to avoid clipping in CSS?

    Bootstrap - How to make text wrap around an image on small devices?

    How to insert a comma in the following code

    How to automaticly let HTML cut the edges based on the setted height of the image?

    How to generate code for cross browser compatibility css in sublime or atom

    How to pop a dialog box /iframe/Lightbox like one below above the webpage content [closed]

    and CSS in Firefox?
    How to avoid the div 'move' when mouse hover?
    How to define CSS styles if Javascript is turned off? [duplicate]
    How to close CSS3 Lightbox by clicking outside of the current image?
    Bootstrap CSS How To: Create a ContentBox with a Title Bar
    How to create a underline with small break in middle with css?