特定のページにだけreset.cssを反映させない方法はありますか？

Question

いま、コーディングから、そのサイトをオリジナルテーマでWordpress化する練習を行っているのですが、
作成時に、reset.cssとしてdestyle.cssを適用させてしまっていたためか、
WordpressのプラグインでContact form7を使用したときに、枠線が出なくなってしまいました。
検証ツールで、枠線に該当しそうなHTMLを探して追加CSSでborderを書いてみたのですが、ラジオボタンにまで枠線がつくなど、おかしくなってしまいました。
ラジオボタンの部分は、デフォルトのように、丸い枠線で、チェックを入れられるようなboxにしたいです。

HTML

<div class="screen-reader-response"><p role="status" aria-live="polite" aria-atomic="true"></p> <ul></ul></div>
<form action="/contact/#wpcf7-f55-p9-o1" method="post" class="wpcf7-form init" aria-label="コンタクトフォーム" novalidate="novalidate" data-status="init">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="55">
<input type="hidden" name="_wpcf7_version" value="6.0.4">
<input type="hidden" name="_wpcf7_locale" value="ja">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f55-p9-o1">
<input type="hidden" name="_wpcf7_container_post" value="9">
<input type="hidden" name="_wpcf7_posted_data_hash" value="">
</div>
<p><label>お名前（必須）<br>
<span class="wpcf7-form-control-wrap" data-name="text-355"><input size="40" maxlength="400" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required box" autocomplete="name" aria-required="true" aria-invalid="false" value="" type="text" name="text-355"></span><br>
</label>
</p>
<p><label>ご年齢<br>
<span class="wpcf7-form-control-wrap" data-name="number-710"><input class="wpcf7-form-control wpcf7-number wpcf7-validates-as-number box" aria-invalid="false" value="" type="number" name="number-710"></span><br>
</label>
</p>
<p><label>メールアドレス（必須）<br>
<span class="wpcf7-form-control-wrap" data-name="email-571"><input size="40" maxlength="400" class="wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email box" aria-required="true" aria-invalid="false" value="" type="email" name="email-571"></span><br>
</label>
</p>
<p><label>お電話番号<br>
<span class="wpcf7-form-control-wrap" data-name="tel-649"><input size="40" maxlength="400" class="wpcf7-form-control wpcf7-tel wpcf7-text wpcf7-validates-as-tel box" aria-invalid="false" value="" type="tel" name="tel-649"></span><br>
</label>
</p>
<p><label>ご希望の返信方法（必須）</label>
</p>
<p><span class="wpcf7-form-control-wrap" data-name="radio-39"><span class="wpcf7-form-control wpcf7-radio box"><span class="wpcf7-list-item first"><label><input type="radio" name="radio-39" value="メール"><span class="wpcf7-list-item-label">メール</span></label></span><span class="wpcf7-list-item last"><label><input type="radio" name="radio-39" value="お電話"><span class="wpcf7-list-item-label">お電話</span></label></span></span></span>
</p>
<p><label>お問い合わせ内容（必須）</label><br>
<span class="wpcf7-form-control-wrap" data-name="textarea-388"><textarea cols="40" rows="10" maxlength="2000" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required box" aria-required="true" aria-invalid="false" name="textarea-388"></textarea></span>
</p>
<p><input class="wpcf7-form-control wpcf7-submit has-spinner" type="submit" value="送信"><span class="wpcf7-spinner"></span>
</p><div class="wpcf7-response-output" aria-hidden="true"></div>
</form>
</div>

CSS

border:1px solid #78d8d9;
}
input[type="submit"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
font-size: 20px;
font-weight: bold;
width: 200px;
padding: 10px;
border-radius: 10px;
background-color: #233b6c;
border: none;
color: #fff;
cursor: pointer;
}
span.wpcf7-spinner {
display: none;
}

Answer 1

いろいろ調べたところ、そのページのみreset.cssを無効化するという方法を見かけましたが、肝心なやり方がわかりません。

方向性が間違っています。
そのページにはフォーム以外の全ページでの共通部分(タイトル、メニュー、サイドバー、フッターなど)もありますよね。
もし、「そのページのみreset.cssを無効化」したら共通部分が他ページとは変わってしまうので、合わせるために膨大な修正が必要になります。

WordpressのプラグインでContact form7を使用したときに、枠線が出なくなってしまいました。
検証ツールで、枠線に該当しそうなHTMLを探して追加CSSでborderを書いてみたのですが、ラジオボタンにまで枠線がつくなど、おかしくなってしまいました。

ラジオボタンが対象にならないようにCSSセレクターを設定すればいいだけです。

おそらく:not()とか:has()などを使えは可能と思われますので研究してみてください。

分からなければ、現状のフォーム部分のHTMLとCSSを質問に追記すれば適切な回答が付くと思います。

追記

Contact Form 7 のラジオボタンのラッパーは下記のようにdata属性が付加されているのでそれを利用すればいいでしょう。

<span class="wpcf7-form-control-wrap" data-name="radio-39">
<!-- 略 -->
</span>

:not を使って data-name が "radio-" で始まる要素を除外する。

.wpcf7-form-control-wrap:not([data-name^="radio-"]) {
  border: 1px solid #78d8d9;
}

Comments

[pujamaru611815]

回答ありがとうございます。
そのページだけreset.cssを適用しないとなると、hatena19さんのおっしゃる通り、ほかのすべての共通部分にも影響が出てしまいますね（汗）
勉強になりました、ありがとうございます。
いろいろ触ってみましたが、なかなか解決しないので、HTML・CSSをコピーしました。
ラジオボタンのところが四角の枠線ではなく、デフォルトのような、丸の枠線（？）にしたいです。
わかる方いらっしゃればよろしくお願いいたします。

HTML
<div class="wpcf7 js" id="wpcf7-f55-p9-o1" lang="ja" dir="ltr" data-wpcf7-id="55">
<div class="screen-reader-response"><p role="status" aria-live="polite" aria-atomic="true"></p> <ul></ul></div>
<form action="/contact/#wpcf7-f55-p9-o1" method="post" class="wpcf7-form init" aria-label="コンタクトフォーム" novalidate="novalidate" data-status="init">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="55">
<input type="hidden" name="_wpcf7_version" value="6.0.4">
<input type="hidden" name="_wpcf7_locale" value="ja">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f55-p9-o1">
<input type="hidden" name="_wpcf7_container_post" value="9">
<input type="hidden" name="_wpcf7_posted_data_hash" value="">
</div>
<p><label>お名前（必須）<br>
<span class="wpcf7-form-control-wrap" data-name="text-355"><input size="40" maxlength="400" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required box" autocomplete="name" aria-required="true" aria-invalid="false" value="" type="text" name="text-355"></span><br>
</label>
</p>
<p><label>ご年齢<br>
<span class="wpcf7-form-control-wrap" data-name="number-710"><input class="wpcf7-form-control wpcf7-number wpcf7-validates-as-number box" aria-invalid="false" value="" type="number" name="number-710"></span><br>
</label>
</p>
<p><label>メールアドレス（必須）<br>
<span class="wpcf7-form-control-wrap" data-name="email-571"><input size="40" maxlength="400" class="wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email box" aria-required="true" aria-invalid="false" value="" type="email" name="email-571"></span><br>
</label>
</p>
<p><label>お電話番号<br>
<span class="wpcf7-form-control-wrap" data-name="tel-649"><input size="40" maxlength="400" class="wpcf7-form-control wpcf7-tel wpcf7-text wpcf7-validates-as-tel box" aria-invalid="false" value="" type="tel" name="tel-649"></span><br>
</label>
</p>
<p><label>ご希望の返信方法（必須）</label>
</p>
<p><span class="wpcf7-form-control-wrap" data-name="radio-39"><span class="wpcf7-form-control wpcf7-radio box"><span class="wpcf7-list-item first"><label><input type="radio" name="radio-39" value="メール"><span class="wpcf7-list-item-label">メール</span></label></span><span class="wpcf7-list-item last"><label><input type="radio" name="radio-39" value="お電話"><span class="wpcf7-list-item-label">お電話</span></label></span></span></span>
</p>
<p><label>お問い合わせ内容（必須）</label><br>
<span class="wpcf7-form-control-wrap" data-name="textarea-388"><textarea cols="40" rows="10" maxlength="2000" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required box" aria-required="true" aria-invalid="false" name="textarea-388"></textarea></span>
</p>
<p><input class="wpcf7-form-control wpcf7-submit has-spinner" type="submit" value="送信"><span class="wpcf7-spinner"></span>
</p><div class="wpcf7-response-output" aria-hidden="true"></div>
</form>
</div>

CSS
wpcf7-form-control-wrap　｛
border:1px solid #78d8d9;
}
input[type="submit"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
font-size: 20px;
font-weight: bold;
width: 200px;
padding: 10px;
border-radius: 10px;
background-color: #233b6c;
border: none;
color: #fff;
cursor: pointer;
}
span.wpcf7-spinner {
display: none;
}

[hatena19]

質問は編集できますので、コードは質問に追記してください。
また、追記する際はマークダウン記法のコードブロック内にコードを入れてください。
詳細は下記を参照ください。
https://teratail.com/help/question-tips#questionTips35

[hatena19]

回答にコードを追記しておきましたが、後から見た人のために質問にコードを追記しておいてください。
コメント欄までは見ない人が多いので。

[pujamaru611815]

ご丁寧にありがとうございます。
質問に追記しました！

回答いただいたとおりに追加CSSを編集したのですが、表示結果に変化はありませんでした、、、。

[hatena19]

こちらで提示のHTML CSS でサンプルを作成して試した限りでは変化しました。
開示されていない部分に原因があると思われます。
こちらでそちらと同じものを作成して確認するのは難しいので、もし、可能なら現状のそのページのURLを教えていただければ検証ツールで原因が分かるかもしれません。

Answer 2

上手くいくかどうかわかりませんが、CSSにこれを入れるのはどうでしょうか。
destyle.cssの後で、できれば、Contact Form 7 のCSSの前がいいです。

input,textarea {
    all: revert;
}

inputではなくてspanにスタイルをつけていらっしゃるようなので、もしかすると、意図するところと違う回答かもしれないです。

Comments

[pujamaru611815]

ありがとうございます。
これをつけたら、本来のものであろうラジオボタンの〇がでてきました！
これは、初期値に戻す（reset.cssをつける前の状態）作用があるものだという認識でよいのでしょうか？
初めて出会ったものなので、教えていただきたいです。

[Lhankor_Mhy]

だいたいそんな感じです。詳細はこちらをご参照ください。
https://developer.mozilla.org/ja/docs/Web/CSS/revert