WEB広告運用の困りごとが集まる場所 › コミュニティ › コミュニティ › アンケートの選択肢を横並びにしたい
-
アンケートの選択肢を横並びにしたい
トピックス by widget初心者 1792 pt 2023年8月21日 21:13 259 PV【widget】
アンケート(スクロール・ボタンを押すと下部表示・複数選択可能)※要javascript(アンケート)
【やりたいこと】
Q1とQ3のYes・Noボタンを横並びに配置したいです。よろしくお願いします。
イメージ:https://t.gyazo.com/teams/squadbeyond/29a31a729ff7e76ac1410b2451c07975.png
widgetマスター 1 年, 2 月前 2 人 · 1 コメント -
1 コメント
-
まずは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; }