特定の要素のCSS設定削除方法

Question

前提・説明

HTML、CSS初心者です。
要素の表示/非表示を対応したく下記㏋を参照にしてコードを記述しました。

参照--------------------------------------------------
●要素の表示・非表示を切り替える方法
https://saruwakakun.com/html-css/reference/hidden-show

参考にしたコードではlabel、inputにCSSを適用させています。
最終的に作りたいページでは非表示の部分にフォーム入力、
名前（input type="text"）、電話番号（input type="tel"）などを
表示させたいです。

しかし上記の通り、参考にしたコードでlabelやinputにCSSを適用させているため
非表示のフォーム入力部分も同じCSSが適用されてしまいます。

実現したいこと

下記コードに書いてある通り、非表示部分のlabel、inputのCSSを削除して
標準的なフォームの設定に戻したいです。

<!--非表示　この部分のlabel、inputのCSSを除外したい-->

該当のソースコード

<div class="hidden_box">
    <label for="label1">クリックして表示</label>
    <input type="checkbox" id="label1"/>
    <div class="hidden_show">
      <!--非表示　この部分のlabel、inputのCSSを除外したい-->     
      	<form action="/my-handling-form-page" method="post">
           <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name">
  </div>
  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_mail">
  </div>
  <div>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </div>
        </form>
      <!--ここまで-->
    </div>
</div>

.hidden_box {
    margin: 2em 0;/*前後の余白*/
    padding: 0;
}

.hidden_box label {
    padding: 15px;
    font-weight: bold;
    border: solid 2px black;
    cursor :pointer;
}

.hidden_box label:hover {
    background: #efefef;
}

.hidden_box input {
    display: none;
}

.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}
.hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}

コメント

初歩的な質問になり申し訳ありません。
知識が少ないため対応方法がわからずご相談させて頂いております。
何卒、宜しくお願い致します。

Answer 1

スタイルを適用したい要素にclassを付けるか、逆に適用したくない要素にclassを付けてあげる方がいいのではないかと思います。

ご提示のコード片だけから見れば、特殊なスタイルを適用したい要素にだけclassを付与する方が適切なような気がします。

Answer 2

for (let sheet of document.styleSheets) {
  for (let i = sheet.cssRules.length; i--; ) {
    if (sheet.cssRules[i].type === 1 && sheet.cssRules[i].selectorText.startsWith('.hidden_box ')) {
      sheet.deleteRule(i);
    }
  }
}