• コミュニティ

  アンケートの選択肢を横並びにしたい

  トピックス by widget初心者 1792 pt  2023年8月21日 21:13 275 PV

  【widget】

  アンケート（スクロール・ボタンを押すと下部表示・複数選択可能）※要javascript(アンケート)

  【やりたいこと】

  Q1とQ3のYes・Noボタンを横並びに配置したいです。よろしくお願いします。

  イメージ：https://t.gyazo.com/teams/squadbeyond/29a31a729ff7e76ac1410b2451c07975.png

  widgetマスター   1 年, 3 月前 2 人 · 1 コメント

  • widget
  • アンケート
  • アンケート（スクロール・ボタンを押すと下部表示・複数選択可能）※要javascript(アンケート)
• 1 コメント

• 

  widgetマスター

  モデレータ

  2023年8月22日 11:12

  まずはHTMLのYes/Noボタンにしたい部分の<div class=”linkbox”> にbool クラスを追加してください！

  【変更前】

  <div class="linkbox">
      <input id="q1-yes" type="radio" name="q1" value="yes"><label for="q1-yes">
          <div class="btn">Yes</div>
      </label><input id="q1-no" type="radio" name="q1" value="no"><label for="q1-no">
          <div class="btn">No</div>
      </label>
  </div>

  【変更後】

  <div class="linkbox bool">
      <input id="q1-yes" type="radio" name="q1" value="yes"><label for="q1-yes">
          <div class="btn">Yes</div>
      </label><input id="q1-no" type="radio" name="q1" value="no"><label for="q1-no">
          <div class="btn">No</div>
      </label>
  </div>

  その後にこちらのCSSを追加してください！

  ※既存のボタンを上書きするためそれより下の行に追加してください（一番下でOK）

  .question-reveal-scroll .linkbox.bool {
    list-style: none;
    overflow: hidden;
    margin: 0;
    padding: 4.68% 9.37% 5% 9.37%;
    display: flex;
    box-sizing: border-box;
  }
  
   .question-reveal-scroll .linkbox.bool label {
    width: 50%;
  }
  
   .question-reveal-scroll .linkbox.bool label .btn {
    display: block;
    width: 100%;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
    padding: 10%;
    border-radius: 8px;
    font-size: 26px;
    line-height: 1;
    color: #fff;
    font-weight: bold;
    background: #aaa;
    border-bottom: 5px solid #666;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
    transition: margin-top 0.1s, border-bottom-width 0.1s;
    box-sizing: border-box;
  }
  
   .question-reveal-scroll .linkbox.bool label:nth-of-type(1) .btn {
    color: #fff;
    background: #c9171e;
    border-color: #752100;
  }
  
   .question-reveal-scroll .linkbox.bool label:nth-of-type(2) .btn {
    color: #fff;
    background: #444444;
    border-color: #222222;
  }
  
   .question-reveal-scroll .linkbox.bool input[type=radio]:checked+label .btn,
   .question-reveal-scroll .linkbox.bool label .btn:hover {
    margin-top: 3px;
    border-bottom-width: 2px;
  }

Log In to Reply