実現したいこと
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; } }
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2024/10/05 02:37
2024/10/07 01:41