SVG画像を背景画像として使用している場合のチェック状態の類似要素をbeforとafterで表示したい

Question

実現したいこと

wordpressのレスポンシブで模写元サイトを参考して未チェック状態をbeforそしてチェック状態をafterとして表示を切り替えるようにしたい。そしてクリック後に背景色を黒に表示させるようにしたい。
https://www.delights-home.jp/contact
・以下はできるようにしたいimg

私の場合は黒を表示させることができましたが、レスポンシブでは最初から黒になっている状態ですので、
クリック後に背景色を表示させるようにしたい。

###管理画面>お問い合わせ

<dl>
<div class="contact__wrap">
　<div class="contact_form-box">
　<dt class="contact_txt">お問い合わせ項目<span>必 須</span></dt>
　<dd class="content_radio"><div class="contact_radio">[radio radio-421 use_label_element default:1 "お問い合わせ""資料請求" "オーナー宅見学申込""来場予約"]</div></dd>
</div>
</dl>
以下省略

###contact.php(管理画面>お問い合わせでHTMLを記述しているためphpは以下の通りです)

<?php
/*
* Template Name: CONTACTページ
*/
?>
<?php wp_head(); ?>
<?php get_header();?>

<main class="page_contact">
    <div class="pg_contact">
      <h1 class="pg_contact_h1">CONTACT</h1>
      <p class="sub">お問い合わせ・資料請求</p>
    </div><!--.pg_lineup-->
</main>


<?php
if ( have_posts() ) :
  while( have_posts() ) : the_post();
    the_content(); /* 本文を出力 */
  endwhile;
endif;
?>

<div class="link_view6">
    <a href="" class="link_btn">確認画面に進む
      <span class="arrow"></span>
    </a>
</div>

<nav class="top_contact">
   <ul class="contact_ul">
      <li class="list"><a href="" class="link">TOP</a></li>
      <li class="list"><span class="contact_pg">CONTACT</span></li>
   </ul>
</nav>

<?php get_footer();?>

css

.content_radio .contact_radio {
  background-color: #FFF;
}

@media screen and (max-width:767.98px) {
  .content_radio .contact_radio {
    background-color: #F3F4EF;
  }
}

.contact_radio .wpcf7-form-control {
  display: grid;
  grid-template-columns: repeat(2, 325px);
  line-height: 2.75;
  padding: 0px;
}

@media screen and (max-width:767.98px) {
  .contact_radio .wpcf7-form-control {
    display: grid;
    grid-template-columns: 4fr;
  }
}

@media screen and (max-width:767.98px) {
  input[type="radio"] {
    opacity: 0;
    position: absolute;
  }
}

@media screen and (max-width:767.98px) {
  .contact_radio .wpcf7-list-item {
    margin-bottom: 6px;
    width: 100%;
    margin-left: 0;
  }
}


@media screen and (max-width:767.98px) {
  .contact_radio label {
    display: flex;
    align-items: center;
    width: 100%;
    border: 1px solid #ccc;
    cursor: pointer;
    background-color: #FFF;
  }
}

@media screen and (max-width:767.98px) {
  .contact_radio label .wpcf7-list-item-label {
    display: flex;
    align-items: center;
    width: 100%;
    border: 1px solid #ccc;
    cursor: pointer;
    background-color: #FFF;
  }
}


@media screen and (max-width:767.98px) {
  .contact_radio input:checked+.wpcf7-list-item-label {
    background-color: #000;
    color: #FFF;
  }
}



@media screen and (max-width:767.98px) {
  .contact_radio .wpcf7-list-item-label::before {
    content: "";
    display: inline-block;
    flex: 0 0 24px;
    width: 30px;
    height: 30px;
    background-image: url(../img/check_box_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.png);
    background-size: cover;
    margin-right: 10px;
    margin-top: 10px;
  }
}

Answer 1

SVGはcontentの書き換え次第なのでとりあえずテキストで代用
ざっとこんな感じ

<style>
#inquiryUl{
list-style:none;
display:flex;
flex-wrap:wrap;
row-gap:10px;
}
#inquiryUl li{
display:block;
width:60%;
border:solid 1px lightgray;
}
#inquiryUl li label{
display:block;
width:100%;
}
#inquiryUl li label:has(:checked):before{
content:"[+]";
}
#inquiryUl li label:not(:has(:checked)):before{
content:"[-]";
}
#inquiryUl li:has(:checked){
background-Color:gray;
color:white;
}
#inquiryUl [type=radio]{
display:none;
}

</style>
<div class="inputarea -first">
<ul class="chkul" id="inquiryUl">
<li><label><input type="radio" name="contact" class="list">お問い合わせ</label></li>
<li><label><input type="radio" name="contact" class="list">資料請求</label></li>
<li><label><input type="radio" name="contact" class="list">オーナー宅見学申込</label></li>
<li><label><input type="radio" name="contact" class="list">来場予約</label></li>
</ul>
</div>

svgバージョン

一応SVGバージョンを追記しておきます

<style>
#inquiryUl{
list-style:none;
display:flex;
flex-wrap:wrap;
row-gap:10px;
}
#inquiryUl li{
display:block;
width:60%;
border:solid 1px lightgray;
}
#inquiryUl li label{
display:block;
width:100%;
}
#inquiryUl li label:before{
content:"";
width:20px;
height:20px;
display:inline-block;
transform:translateY(4px);
}
#inquiryUl li label:has(:checked):before{
background-Image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><rect x="3" y="3" width="14" height="14" stroke-width="3" stroke="white" fill="none" /><polyline points="6,8 9,12 14,8" stroke="white" stroke-width="3" fill="none" /></svg>');
}
#inquiryUl li label:not(:has(:checked)):before{
background-Image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><rect x="3" y="3" width="14" height="14" stroke-width="3" stroke="gray" fill="none" /><polyline points="6,8 9,12 14,8" stroke="gray" stroke-width="3" fill="none" /></svg>');
}
#inquiryUl li:has(:checked){
background-Color:gray;
color:white;
}
#inquiryUl [type=radio]{
display:none;
}

</style>
<div class="inputarea -first">
<ul class="chkul" id="inquiryUl">
<li><label><input type="radio" name="contact" class="list">お問い合わせ</label></li>
<li><label><input type="radio" name="contact" class="list">資料請求</label></li>
<li><label><input type="radio" name="contact" class="list">オーナー宅見学申込</label></li>
<li><label><input type="radio" name="contact" class="list">来場予約</label></li>
</ul>
</div>

Comments

[yosuke1025]

コメントいただきありがとうございます。申し訳ございませんが、内容編集いたしましたのでご確認の程お願い致します。

[yambejp]

ごめんなさい、コメントの意図がよくわかりません。SVGバージョン追記しておいたので動作が想定と違うようなら指摘ください