checkbox를 체크했을 때 CSS 클래스 display를 바꾸는 방법

Asked 3 months ago, Updated 3 months ago, 51 views

checkbox를 선택하여 CSS 클래스 속성을 변경하려고 하지만 작동하지 않습니다.

혹시 해결방법 아시는 분 있을까요?

<html lang="pt-br">
<body>
  <style>
    #test:checked~#title {
      display: none;
    }
  </style>
  <h1 id="title">Just a text</h1>

  <input type="checkbox" id="test" />
</body>
</html>

html css

2022-06-21 10:59

1 Answers

아래처럼 하면 될 것 같네요.

.form_group{
  display: flex;
  flex-direction: column;
} 
#test{
  order: 2;
}
#title{
  order: 1;
}
#test:checked~#title {
      display: none;
}

 

<div class="form_group">   
  <input type="checkbox" id="test" />
<h1 id="title">Just a text</h1> 
</div>
 


2022-06-21 11:00

If you have any answers or tips


© 2022 pinfo. All rights reserved.