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

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

Popular Tags

python x 4625

android x 1591

java x 1472

javascript x 1386

c x 903

c++ x 821

php x 684

ruby-on-rails x 679

python3 x 645

html x 635