質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.83%

check_boxを選択しかできない、選択解除できない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 703

sooryung

score 19

check_boxを選択しかできず、選択解除ができません。

複数選択はできるのですが、選択の取り消しができません。
(選択したものをもう一回押すと選択解除される、という操作です。)

イメージ説明
↑walkをもう一回押しても、変化がない

いろいろ試しましたがわかりません!どなたか分かる方いらっしゃいませんか。

<div class="container">
  <div class="checkbox-tile-group">
    <div class="input-container">
      <input id="walk" class="checkbox-button" type="checkbox" name="checkbox" />
      <div class="checkbox-tile">
        <div class="icon walk-icon">
          <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
            <path d="M0 0h24v24H0z" fill="none"/>
            <path d="M13.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM9.8 8.9L7 23h2.1l1.8-8 2.1 2v6h2v-7.5l-2.1-2 .6-3C14.8 12 16.8 13 19 13v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1L6 8.3V13h2V9.6l1.8-.7"/>
          </svg>
        </div>
        <label for="walk" class="checkbox-tile-label">Walk</label>
      </div>
    </div>

    <div class="input-container">
      <input id="bike" class="checkbox-button" type="checkbox" name="checkbox" />
      <div class="checkbox-tile">
        <div class="icon bike-icon">
          <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
            <path d="M0 0h24v24H0z" fill="none"/>
            <path d="M15.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM5 12c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 8.5c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5zm5.8-10l2.4-2.4.8.8c1.3 1.3 3 2.1 5.1 2.1V9c-1.5 0-2.7-.6-3.6-1.5l-1.9-1.9c-.5-.4-1-.6-1.6-.6s-1.1.2-1.4.6L7.8 8.4c-.4.4-.6.9-.6 1.4 0 .6.2 1.1.6 1.4L11 14v5h2v-6.2l-2.2-2.3zM19 12c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 8.5c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5z"/>
          </svg>
        </div>
        <label for="bike" class="checkbox-tile-label">Bike</label>
      </div>
    </div>

    <div class="input-container">
      <input id="drive" class="checkbox-button" type="checkbox" name="checkbox" />
      <div class="checkbox-tile">
        <div class="icon car-icon">
          <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
            <path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"/>
            <path d="M0 0h24v24H0z" fill="none"/>
          </svg>
        </div>
        <label for="drive" class="checkbox-tile-label">Drive</label>
      </div>
    </div>

    <div class="input-container">
      <input id="fly" class="checkbox-button" type="checkbox" name="checkbox" />
      <div class="checkbox-tile">
        <div class="icon fly-icon">
          <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.18 9"/>
            <path d="M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z"/>
            <path d="M0 0h24v24H0z" fill="none"/>
          </svg>
        </div>
        <label for="fly" class="checkbox-tile-label">Fly</label>
      </div>
    </div>
  </div>
</div>
* {
  box-sizing: border-box;
  font-family: 'Helvetica Neue', sans-serif;
}

body {
  background-color: black;
}

$primary-color: #079ad9;

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.checkbox-tile-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  //set dimensions for invisible container
  .input-container {
    position: relative;
    height:  7rem;
    width:  7rem;
    margin: 0.5rem;

    //make actual checkbox input invisible
    // + stretch to fill container
    .checkbox-button {
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      margin: 0;
      cursor: pointer;
    }

    //default tile styles
    .checkbox-tile {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      border: 2px solid $primary-color;
      border-radius: 5px;
      padding: 1rem;
      transition: transform 300ms ease;
    }
    .icon svg {
      fill: $primary-color;
      width: 3rem;
      height: 3rem;
    }
    .checkbox-tile-label {
      text-align: center;
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: $primary-color;
    }

    //active tile styles
    .checkbox-button:checked + .checkbox-tile {
      background-color: $primary-color;
      border: 2px solid $primary-color;
      color: white;
      transform: scale(1.1, 1.1);

      .icon svg {
        fill: white;
        background-color: $primary-color;
      }
      .checkbox-tile-label {
        color: white;
        background-color: $primary-color;
      }
    }
  }
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2019/05/03 12:12

    CSSではなくSCSSやSASSでは?

    キャンセル

  • sooryung

    2019/05/03 16:46

    すみません汗おっしゃるとおりです💦

    キャンセル

  • kei344

    2019/05/03 16:51

    (質問文は編集できます)この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文を修正することをお勧めします。また、「SASS」https://teratail.com/tags/Sass ならタグがあるので、もしSCSSで無いならつけることをお勧めします。

    キャンセル

  • sooryung

    2019/05/03 22:46

    sassではないので、せめてcss3より具体的でないcssに変更しました(消そうかとも思いましたが、htmlだけでは不十分なのに、同じ問題にぶつかっている方が見つけられる可能性が上がるように・・)。
    本文中のcssもscssに変更しました。
    ご指摘ありがとうございます。

    キャンセル

回答 1

checkベストアンサー

+1

こんにちは

ちょっと試して欲しいのですが、スタイルの下のほうで、以下のようなスタイル追加をしてみると、いかがでしょうか?

修正前:

    //active tile styles
    .checkbox-button:checked + .checkbox-tile {
      background-color: $primary-color;
      border: 2px solid $primary-color;
      color: white;
      transform: scale(1.1, 1.1);

上記を、以下の2点で追加、修正します。

  • チェックされている状態の checkbox のスタイルを追加して、 z-index: 1; を指定

  • チェックボックスがチェックされているときの .checkbox-tile に、 z-index: 0; を追加

修正後:

    // (追加) active checkbox styles
    .checkbox-button:checked {
      z-index: 1;
    }

    //active tile styles
    .checkbox-button:checked + .checkbox-tile {
      background-color: $primary-color;
      border: 2px solid $primary-color;
      color: white;
      transform: scale(1.1, 1.1);
      z-index: 0; // ← 追加

 補足

以下、確認のため、jsFiddle に上記のコードを作成しました。

以上、参考になれば幸いです。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/03 22:39

    とても綺麗に動きました!!
    こうして初心者に時間を割いてくださって本当ありがたいです。ありがとうございました!

    キャンセル

  • 2019/05/03 22:53

    どういたしまして。
    解決したようで、よかったです 👌

    キャンセル

  • 2019/05/04 20:58

    はい!またよろしくお願いします!😄

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.83%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る