CSS selector for a checked radio button's label - HTML CSS CSS Form

HTML CSS examples for CSS Form:input radio button

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input radio button

Description

CSS selector for a checked radio button's label

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>Filter Header</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

* {<!--  w  ww .java2s  .  c  om-->
   padding: 0;
   margin: 0;
   background-color: #262626;
   color: white;
}
.radio-button {
   display: none;
}
#filter {
   padding: 5% 0;
   display: flex;
   justify-content: center;
}
.filter-label {
   display: inline-block;
   border: 4px solid green;
   padding: 10px 20px;
   font-size: 1.4em;
   text-align: center;
   cursor: pointer;
}
.content {
   padding: 3% 10%;
   display: none;
}
h1 {
   font-size: 2em;
}
.date {
   padding: 5px 30px;
   font-style: italic;
}
.filter-label:hover {
   background-color: #505050;
}
#featured-radio:checked~#filter .featured,
#personal-radio:checked~#filter .personal,
#tech-radio:checked~#filter .tech {
   background-color: green;
}
#tech-radio:checked~main .tech,
#featured-radio:checked~main .featured,
#personal-radio:checked~main .personal {
   display: block;
}


      </style> 
 </head> 
 <body> 
  <input type="radio" id="featured-radio" class="radio-button" name="content-filter" checked> 
  <input type="radio" id="personal-radio" class="radio-button" name="content-filter"> 
  <input type="radio" id="tech-radio" class="radio-button" name="content-filter"> 
  <header id="filter"> 
   <label for="featured-radio" class="filter-label featured">Featured</label> 
   <label for="personal-radio" class="filter-label personal">Personal</label> 
   <label for="tech-radio" class="filter-label tech">Tech</label> 
  </header> 
  <main> 
   <article class="content featured tech"> 
    <header> 
     <h1>Cool Stuff</h1> 
     <h3 class="date">Today</h3> 
    </header> 
    <p> I'm showing cool stuff in this article! </p> 
   </article> 
   <article class="content personal"> 
    <header> 
     <h1>Not As Cool</h1> 
     <h3 class="date">Tuesday</h3> 
    </header> 
    <p> This stuff isn't nearly as cool for some reason :(; </p> 
   </article> 
   <article class="content tech"> 
    <header> 
     <h1>Cool Tech Article</h1> 
     <h3 class="date">Last Monday</h3> 
    </header> 
    <p> This article has awesome stuff all over it! </p> 
   </article> 
   <article class="content featured personal"> 
    <header> 
     <h1>Cool Personal Article</h1> 
     <h3 class="date">Two Fridays Ago</h3> 
    </header> 
    <p> this is a test this is a test this is a test </p> 
   </article> 
  </main>  
 </body>
</html>

Related Tutorials