アンケート

【アンケート】単一・複数選択、選択後色変わる

 
Q1. 設問がはいります(複数選択可)
Q2. 設問がはいります(複数選択可)
Q3. 設問がはいります(複数選択可)
Q4. 設問がはいります(単一選択)
Q5. 設問がはいります(単一選択)

下記Beyondコード

JS head

なし

HTML

<div class="questionnaire_p01-h2">Q1. 設問がはいります(複数選択可)</div>
<p><img class="aligncenter size-full wp-image-8334" src="https://production.static.squadbeyond.com/uploads/article_photo/photo/711633/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png" alt="" width="750" height="529" /></p>
<div class="questionnaire_p01-blackwood_box">
<div class="choices_box"><input id="choice01-1" class="questionnaire_p01-selecter" name="choice01" type="checkbox" /><label class="questionnaire_p01-choice-check" for="choice01-1">選択肢1</label><input id="choice01-2" class="questionnaire_p01-selecter" name="choice01" type="checkbox" /><label class="questionnaire_p01-choice-check" for="choice01-2">選択肢2</label><input id="choice01-3" class="questionnaire_p01-selecter" name="choice01-3" type="checkbox" /><label class="questionnaire_p01-choice-check" for="choice01-3">選択肢3</label><input id="choice01-4" class="questionnaire_p01-selecter" name="choice01" type="checkbox" /><label class="questionnaire_p01-choice-check" for="choice01-4">選択肢4</label></div>
</div>
<div class="questionnaire_p01-h2">Q2. 設問がはいります(複数選択可)</div>
<p><img class="aligncenter size-full wp-image-8334" src="https://production.static.squadbeyond.com/uploads/article_photo/photo/711633/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png" alt="" width="750" height="529" /></p>
<div class="questionnaire_p01-blackwood_box">
<div class="choices_box"><input id="choice02-1" class="questionnaire_p01-selecter" name="choice02" type="checkbox" /><label class="questionnaire_p01-choice-check" for="choice02-1">選択肢1</label><input id="choice02-2" class="questionnaire_p01-selecter" name="choice02" type="checkbox" /><label class="questionnaire_p01-choice-check" for="choice02-2">選択肢2</label><input id="choice02-3" class="questionnaire_p01-selecter" name="choice02-3" type="checkbox" /><label class="questionnaire_p01-choice-check" for="choice02-3">選択肢3</label><input id="choice02-4" class="questionnaire_p01-selecter" name="choice02" type="checkbox" /><label class="questionnaire_p01-choice-check" for="choice02-4">選択肢4</label></div>
</div>
<div class="questionnaire_p01-h2">Q3. 設問がはいります(複数選択可)</div>
<p><img class="aligncenter size-full wp-image-8334" src="https://production.static.squadbeyond.com/uploads/article_photo/photo/711633/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png" alt="" width="750" height="529" /></p>
<div class="questionnaire_p01-blackwood_box">
<div class="choices_box"><input id="choice03-1" class="questionnaire_p01-selecter" name="choice03" type="checkbox" /><label class="questionnaire_p01-choice-check" for="choice03-1">選択肢1</label><input id="choice03-2" class="questionnaire_p01-selecter" name="choice03" type="checkbox" /><label class="questionnaire_p01-choice-check" for="choice03-2">選択肢2</label><input id="choice03-3" class="questionnaire_p01-selecter" name="choice03-3" type="checkbox" /><label class="questionnaire_p01-choice-check" for="choice03-3">選択肢3</label><input id="choice03-4" class="questionnaire_p01-selecter" name="choice03" type="checkbox" /><label class="questionnaire_p01-choice-check" for="choice03-4">選択肢4</label></div>
</div>
<div class="questionnaire_p01-h2">Q4. 設問がはいります(単一選択)</div>
<p><img class="aligncenter size-full wp-image-8334" src="https://production.static.squadbeyond.com/uploads/article_photo/photo/711633/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png" alt="" width="750" height="529" /></p>
<div class="questionnaire_p01-blackwood_box">
<div class="choices_box"><input id="choice04-1" class="questionnaire_p01-selecter" name="choice04" type="radio" /><label class="questionnaire_p01-choice-check" for="choice04-1">はい</label><input id="choice04-2" class="questionnaire_p01-selecter" name="choice04" type="radio" /><label class="questionnaire_p01-choice-check" for="choice04-2">いいえ</label></div>
</div>
<div class="questionnaire_p01-h2">Q5. 設問がはいります(単一選択)</div>
<p><img class="aligncenter size-full wp-image-8334" src="https://production.static.squadbeyond.com/uploads/article_photo/photo/711633/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png" alt="" width="750" height="529" /></p>
<div class="questionnaire_p01-blackwood_box">
<div class="choices_box"><input id="choice05-1" class="questionnaire_p01-selecter" name="choice05" type="radio" /><label class="questionnaire_p01-choice-check" for="choice05-1">はい</label><input id="choice05-2" class="questionnaire_p01-selecter" name="choice05" type="radio" /><label class="questionnaire_p01-choice-check" for="choice05-2">いいえ</label></div>
</div>

CSS

/* タイトル */
.questionnaire_p01-h2{
    box-sizing: border-box;
    max-width: 100%;
    font-size: 20px;
    margin: 20px 0px 30px;
    padding: 10px;
    color: rgb(255, 255, 255);
    background: rgb(240, 102, 102);
    text-align: left;
    font-weight: 700;
    line-height: 30px;
}

/*複数選択可*/
.questionnaire_p01-blackwood_box {
  position: relative;
  color: #000000;
  margin: 30px 0;
}

 .questionnaire_p01-blackwood_box .questionnaire_p01-selecter {
  display: none;
}

 .questionnaire_p01-blackwood_box .questionnaire_p01-selecter:checked+.questionnaire_p01-choice-check {
  background: #f96680;
  border-color: #fff;
  color: #fff;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  transition: 200ms;
}

 .questionnaire_p01-blackwood_box .questionnaire_p01-selecter:checked+.questionnaire_p01-choice-check {
  background: #000000;
  border-color: #fff;
  color: #fff;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  transition: 200ms;
}


/*アンケートボックス*/
.questionnaire_p01-blackwood_box .questionnaire_p01-selecter+.questionnaire_p01-choice-check {
  border: solid 3px #613d29;
  display: block;
  padding: 10px 15px;
  font-weight: bold;
  border-radius: 28px;
  margin-bottom: 10px;
}

 .questionnaire_p01-blackwood_box .questionnaire_p01-selecter:checked+.questionnaire_p01-choice-check {
  background: #f96680;
  border-color: #fff;
  color: #fff;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  transition: 200ms;
}

/*チェックをした時*/

/* 画面サイズPCの時のみhover時に反応する様にする。
※SP時に以下の設定があると挙動がおかしくなります。 */
@media screen and (min-width:601px) {
   .questionnaire_p01-blackwood_box .questionnaire_p01-selecter+.questionnaire_p01-choice-check:hover {
    background: #f96680;
    border-color: #fff;
    color: #fff;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
    transition: 200ms;
  }
}
simplicity02 アンケート
RELATED POST