Problems with Tag Label Pseudo-classes

Asked

Viewed 13 times

0

It is possible to apply effects of :hover, :active and :focus on the tag Label whole? I’m not getting it because the effect only applies to content label...

body{
  font-family:Helvetica,Arial;
}
.collapse{
  margin-top: 50px;
  transition:all .5s;
  opacity:0;
}

label:hover{
  background-color: green;
}
label:focus{
    background-color: yellow;
}
label:active{
  background-color: red;
}

label:before{
    content: "Generic button";
    padding: 6px 12px;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    border-color: #CCC;
}
#do-collapse{
  visibility:hidden;
  position:absolute;
}
#do-collapse:checked ~ .collapse{  
  margin-top:10px;
  opacity:1;
}
<input type="checkbox" id="do-collapse"/> 
<label for="do-collapse"></label>
<div class="collapse">
  Something
</div>

  • I removed my answer precisely because there was already a similar question.

  • besides having no answer, I can’t see where the question is similar to mine

  • 1

    Just put in your code: label:hover:before, label:focus:before, label:active:before ... As it is in the answer to the quoted question.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.