• 
• 1. SitePoint
  2. Reference
  3. CSS
  4. Selector Reference
  5. Pseudo-classes
  6. CSS3 Pseudo-classes
  7. :checked Pseudo-class
  8. CSS Live Demo: :checked Pseudo-class (this page)
• See also: All Live Demos

CSS Live Demo: :checked Pseudo-class

Type your CSS here: (any properties allowed except expression, behavior and @import) input:checked+span { color:#090; font-weight:bold; } input+span { color:#555; font-weight:normal; }

Type your HTML here: (any tags allowed except script, iframe, frame, object, img and embed) <form action="#"> <fieldset> <legend>Side-orders</legend> <label for="chips"> <input type="checkbox" id="chips" name="chips" /> <span>Chips</span> </label> <label for="veggies"> <input type="checkbox" id="veggies" name="veggies" checked="checked" /> <span>Veggies</span> </label> <label for="salad"> <input type="checkbox" id="salad" name="salad" /> <span>Salad</span> </label> <label for="potato"> <input type="checkbox" id="potato" name="potato" /> <span>Baked Potato</span> </label> </fieldset> </form>

Show me!

Your results appear here: