checkboxをcheckしたら、imgの背景色を変えたい

前提

htmlとCSS、javaScriptを用いてWebサイトを作っています。ピン留め機能を追加したいと思っています。

実現したいこと

ピン留めの画像は、以下のように中心だけくり抜いたピンの画像を用いています。(CSSでピンの形を作るのが難しかったので、この方法を用いました。)checkboxをcheckする前は、背景色は灰色です。checkboxをcheckしたら、imgの背景色を黄色に変えたいです。CSSをどのように変更すればいいでしょうか？

該当のソースコード

変更済み

試したこと

cssは、
.clip input[type="checkbox"]:checked ~ img{
background-color: #ede327;
}
のように指定してみました。この指定方法が間違っているのか、それともinputの後にspanを用いない方がいいのかと感じています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>複数モーダル</title>
    <link href="assets/css/frickty_download.css" rel="stylesheet">
    <link href="assets/css/newCars.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>     
      // モーダルが複数ある場合
      $(function () {
      
        // モーダルのボタンをクリックした時
        $('.modal_trigger .modal_btn').on('click', function() {
          var btnIndex = $(this).index(); // 何番目のモーダルボタンかを取得
          $('.modal_area .modal_box').eq(btnIndex).fadeIn(); // クリックしたモーダルボタンと同じ番目のモーダルを表示する
        });
      
        // ×やモーダルの背景をクリックした時
        $('.modal_close , .modal_bg').click(function(){
          $('.modal_box').fadeOut(); // モーダルを非表示にする
        });
      });
      
    </script>
  </head>
  <body>
    <div class="js-flickity">
      <ul class="modal_trigger"><!--7/27-->
        <li class="modal_btn" id="matsuda">
            <img src="assets/img/matsuda_cx5.png">
            <div class="upper_modal">
              <div class="modal_txt">
                <p>マツダ</p>
                <p>CX-5 CD(4WD)</p>  
              </div>
              <div class="favorite">
                <div class="favorite_txt">
                  <p>お気に入りに</p>
                  <p>追加</p> 
                </div>
                <div class="clip">
                  <input type="checkbox" checked id="1" name="clip"><span class="clip_img"><img src="assets/img/clip.png" alt=">"/></span>
                </div>
              </div>
            </div> 
            <div class="detail-button">
                <a href="history.html"><p>詳細を見る</p><img src="assets/img/basicArrow_#cccccc.png" alt=">"/></a>
            </div>
        </li>
      </ul>

    <!--<script src="assets/js/frickty.pkgd.min.js"></script>flickity-->

  </body>
</html>

#newCars_txt h1{
    text-align: center;
}
#newCars_txt p{
    text-align: center;
    color: rgb(121, 121, 121, 0.5);
    font-size: 15px;
}
.modal_trigger {
    margin: 0 auto;
    margin-top: 100px;/*0729*/
    margin-bottom: 100px; 
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}  
.modal_trigger li {
    display: inline-block;
    box-shadow: 5px 0 13px 0px rgba(71,102,102, 0.5);
    border-radius: 5px;
    cursor: pointer;
    width: 200px;/*0729 fix*/
    height: auto;
    position: relative;
    overflow: hidden;
} 
.modal_trigger li::before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    background: #336666;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
    position: absolute;
    left: -20px;
    top: 100%;
    z-index: -1;
    opacity: 0;
}
.modal_trigger li:hover {/*change the text color*/
    color: #FFF;
}
.modal_trigger li:hover::before{
    -webkit-animation: slideRightBg ease .2s forwards;
            animation: slideRightBg ease .2s forwards;
}
.modal_trigger li + li {
    margin-left: 20px;
}
.upper_modal{
    display: flex;
    justify-content: space-around;
}
.modal_btn img{
    width: 100%;
    height: auto;
}
.modal_txt {
    width: 45%
}
.modal_txt p{
    margin: 0;
    font-size: 12px;
}
.favorite{
    position: relative;/*specify for .heart parent element*/
    box-shadow: 5px 0 13px 0px rgba(71,102,102, 0.7);
    width: 48%;
    height: 40px;
}
.favorite_txt{
    width: 100%;
    margin-left: -10px;
}
.favorite_txt p{
    text-align: center;
    font-size: 12px;
}
.clip{
    display: flex;
}
.clip span{
    width: 20px;
    height: 20px;
}
.clip img{
    position: absolute;
    width: 20px;
    height: 20px;
    /*keep .clip inside the #favorite*/
    right: 0;
    bottom: 20%;
    background-color: #797979;
}
/*.clip label:before,
.clip label:after {
    position: absolute;
    content: "";
    background: #f88dc8;
    border-radius: 50px 50px 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
    left: 10px;
    top: 0;
    width: 10px;
    height: 15px;
}
.clip label:after {
    left: 0;
    transform: rotate(45deg);
    transform-origin :100% 100%;
}*/
.clip input[type="checkbox"]:checked ~ .clip_img {
    background-color: #ede327;
}
/*.clip input + .clip_img:before {
    content: "";
    input[type="checkbox"]
    position: absolute;
    background-image: url(assets/img/clip_img);/*絶対違う気がする！*/
    /*background-color: #797979;
    width: 25px;
    height: 25px;
}*/
/*.check-box input:checked + .clip_img:before {
    background-image: url("ここに「チェック（レ点）の画像」"), url("ここに「ボックスの画像」");
  }*/

.clip input{
    display: none;
}
.detail-button{
    margin: 20px auto;/*center the box*/
    text-align: center;/*center the a elements*/
    border: thin solid black;
    width: 65%;
}
.detail-button a{
  display: flex;
  justify-content: space-around;
  align-items: center;
    text-decoration: none;
    color: black;
}
.detail-button p{
font-size: 15px;
margin: 0;
}
.detail-button img{
    width: 15px;
    height: 15px;
    margin-left: -12px;
}


  
@-webkit-keyframes slideRightBg {
    0% {
      opacity: 0;
      left: -50%;
    }
    100% {
      opacity: 1;
      left: 0;
    }
}
  
@keyframes slideRightBg {
    0% {
      opacity: 0;
      left: -50%;
    }
    100% {
      opacity: 1;
      left: 0;
    }
}
  
.modal_box {
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}
  
.modal_bg {
    background-color: rgba(30, 30, 30, 0.9);
    height: 100%;
    width: 100%;
}
  
.modal_inner {
    background-color: #fff;
    left: 50%;
    padding: 20px 40px 40px 40px;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    max-width: 900px;

}
.modal_block ul {
    padding-left: 0;
}
.modal_block li {
    list-style-type: none;
}
.modal_close {
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 0;
    font-size: 2rem;
}

行動規範の内容に同意します

回答2件

ベストアンサー

色々とおかしな点が見受けられるのですが、とりあえずご質問に関する事だけ回答します。

チェックボックスの切り替えは
<span class="clip_img"><img></span>
をクリックした時でいいですか？

その場合は、まず<label>を使ってチェックボックスが反応する範囲を指定しましょう。

HTML
1                  <label>
2                    <input type="checkbox" name="clip">
3                    <span class="clip_img"><img src="assets/img/clip.png" alt=">"/></span>
4                  </label>

その上でCSSを

CSS
1.clip input[type="checkbox"]:checked + span > img {
2    background-color: #ede327;
3}

として下さい。

<input type="checkbox" name="clip"> に「checked」を書いてたら初期状態がチェック済みになってしまいます。

投稿2022/07/29 02:37

CTRL-S

総合スコア176

nitori-kun

2022/07/29 02:48

色々おかしいことがあってすいません！解決しました！

行動規範の内容に同意します

<div class="clip">
<input type="checkbox" checked id="1" name="clip"><span class="clip_img"><img src="assets/img/clip.png" alt=">"/></span>
</div>

.clip input[type="checkbox"]:checked ~ img{

チェックボックスと <img> は兄弟関係ではないので、一般兄弟結合子 ~ は使えません。
ここは兄弟である <span> とマッチさせてもいいんじゃないでしょうか。

css
1.clip input[type="checkbox"]:checked ~ .clip_img {

投稿2022/07/29 01:14

編集2022/07/29 01:32

int32_t

総合スコア20884

nitori-kun

2022/07/29 01:43

ご回答ありがとうございます。変更してみたのですが、うまくいきませんでした。 spanが不要かと思い、spanタグを消して、imgにclass="clip_img "を入れてみたところ、逆にずっと黄色になりました。

int32_t

2022/07/29 01:50

チェックを外しても背景色が変わらないのでしょうか? ブラウザの開発者ツールで、チェック状態とチェックなし状態でどんなCSSのルールが適用されているのか確認してみてください。

nitori-kun

2022/07/29 02:20

チェック状態とチェックなし状態でcssに変更はありませんでした。 (内容編集しました) spanタグが離れた位置に0×0のコンテナーとしてあったので、 .clip span{ width: 20px; height: 20px; } を適用して大きくしてみたところ、checkをつけていなくても黄色く表示されていました。おそらく、checkboxが動いていないのかなと、、、また、modalを用いていたのですが、この影響があると思ったので、modalは消しました。modalの影響はなかったです。

int32_t

2022/07/29 02:34

そもそもチェックされた input が非表示になっていて <label> もないのでチェックボックスのチェックを外す手段がないですよね。だから span が黄色いままなのは期待通り動いています。

行動規範の内容に同意します

あなたの回答