How can I make these radio buttons responsive? I'm not sure what I'm doing wrong. I'd like to be able to click the grid item each option is in and have it behave like a radio button, but I'm not sure what I'm missing. Any recommendations for streamlining this code would also be extremely helpful. Thanks!
body { font-family: Arial, Helvetica; font-size: 3vh; background-color: #b0b0b0; }.wrapper { width: 50%; margin-left: 25%; margin-right: 25%; display: grid; grid-template-columns: 100px 100px 100px; grid-gap: 20px; grid-auto-rows: 100px; justify-content: center; background-color: ; }.item { border-radius: 50px; color: white; padding: 10px; display: flex; align-items: center; justify-content: center; }.item input { opacity: 0; position: absolute; /*this makes it not interfere with the text location*/ }.item:nth-child(odd) { background: gray; }.item:nth-child(odd):hover { background: limegreen; cursor: pointer; }.item:nth-child(odd):label {}.wrapper h2 { grid-row: 1; grid-column: 1/-1; }
<div id="trialDiv" style="font-size: 13pt;"> <div id="TrialQuestions"> <div id="Questions" class="wrapper"> <h2 style="text-align:center"><i>What emotion was the face expressing? </i></h2> <div id="gap" class="item"></div> <div id="HappyButton" class="item"> <label> <p><input class="responseButton" id="emotion_1" name="emotion" onclick = "GrabEmotionClickTime()" type="radio" value="1" /> Happiness</p> </label> </div> <div id="gap" class="item"></div> <div id="AngryButton" class="item"> <label> <p><input class="responseButton" id="emotion_2" name="emotion" onclick = "GrabEmotionClickTime()"type="radio" value="2" /> Anger</p> </label> </div> <div id="gap" class="item"></div> <div id="FearButton" class="item"> <label> <p><input class="responseButton" id="emotion_4" name="emotion" onclick = "GrabEmotionClickTime()"type="radio" value="3" /> Fear</p> </label> </div> <div id="gap" class="item"></div> <div id="NeutralButton" class="item"> <label> <p><input class="responseButton" id="emotion_4" name="emotion" onclick = "GrabEmotionClickTime()"type="radio" value="4" /> Neutral</p> </label> </div> </div> </div> </div>
Without doing all the work for you, your arrangement of elements is incorrect. Here is a simple example:
https://codepen.io/seanstopnik/pen/8a2ca693e9fe1f1334b921a6d75dbe99
/* For demo only */ body { font-family: sans-serif; padding: 40px; } /* Emotion button */.emotion-button { position: relative; margin: 20px; /* For demo only */ }.emotion-button__input { position: absolute; left: -9999px; }.emotion-button__label { display: inline-block; width: 100px; height: 100px; text-align: center; line-height: 100px; border-radius: 50%; background-color: #ccc; cursor: pointer; transition: all 0.15s ease-in-out; }.emotion-button__input:checked ~.emotion-button__label { color: #fff; background-color: green; }
<div class="emotion-button"> <input id="r1" class="emotion-button__input" type="radio" name="emotion"/> <label for="r1" class="emotion-button__label">Happiness</label> </div> <div class="emotion-button"> <input id="r2" class="emotion-button__input" type="radio" name="emotion"/> <label for="r2" class="emotion-button__label">Anger</label> </div>
Same idea as @SeanStopnik, did all the work for you:
body { font-family: Arial, Helvetica; font-size: 13pt; background-color: #b0b0b0; } #Questions h2 { font-style: italic; }.wrapper { width: 50%; margin-left: 25%; margin-right: 25%; display: grid; grid-template-columns: 100px 100px 100px; grid-gap: 20px; grid-auto-rows: 100px; justify-content: center; background-color: ; }.item label { display: block; border-radius: 50%; color: white; padding: 10px; display: flex; align-items: center; justify-content: center; height: 80px; background: gray; }.item label:hover { background: lime; }.item input { display: none; }.item input:checked + label { background: blue; }.wrapper h2 { grid-row: 1; grid-column: 1/-1; }
<div id="trialDiv"> <div id="TrialQuestions"> <div id="Questions" class="wrapper"> <h2 style="text-align:center">What emotion was the face expressing?</h2> <div class="gap"></div> <div id="HappyButton" class="item"> <input class="responseButton" id="emotion_1" name="emotion" type="radio" value="1" /> <label for="emotion_1">Happiness</label> </div> <div class="gap"></div> <div id="AngryButton" class="item"> <input class="responseButton" id="emotion_2" name="emotion" type="radio" value="2" /> <label for="emotion_2">Anger</label> </div> <div class="gap"></div> <div id="FearButton" class="item"> <input class="responseButton" id="emotion_3" name="emotion" type="radio" value="3" /> <label for="emotion_3">Fear</label> </div> <div class="gap"></div> <div id="NeutralButton" class="item"> <input class="responseButton" id="emotion_4" name="emotion" type="radio" value="4" /> <label for="emotion_4">Neutral</label> </div> </div> </div> </div>
Explanation:
for="id"
attribute, so that clicking the label will check the radio button:checked
to target checked radio for styling+
allows to target the label right after the checked radio Also:
addEventListener
from javascript for that. Your onclick
made the click fail.<i>
to make your titles italic. You should use CSS for thatfont-style: italic;
for the h2
element, nowdays <i>
is used to insert icons
id value
only once in your HTML
! Can't give more than one element the same id
.label
we check the input
, so we hide the input
and style the label
: width + height = 100%
inputs
the same name to prevent checking more than one input[radio]
.AddEventListener
for all the inputs
to toggle the class active
on each one item
(depends on which is the checked
one). console
the id
of the input that is checked
. var inputs = document.querySelectorAll('.item label'); for (let i = 0; i < inputs.length; i++){ inputs[i].addEventListener('click', (e) => { checkEmotion(inputs[i], e); }); } function checkEmotion(input, e){ for(let i = 0; i < inputs.length; i++){ inputs[i].parentElement.classList.remove('active'); } e.target.parentElement.classList.add('active'); console.log(input.nextElementSibling.getAttribute("id")); }
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, Helvetica; background-color: #b0b0b0; } h2 { margin: 20px 0; font-style: italic; }.wrapper { display: flex; justify-content: center; }.item { border-radius: 50px; color: white; display: flex; align-items: center; justify-content: center; width: 90px; height: 90px; margin: 0 10px; background: gray; position: relative; overflow: hidden; transition: all 0.2s; }.item.active { background: #121212; }.item input { opacity: 0; display: absolute; height: 0; width: 0; }.item label { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; }.item:hover { background: limegreen; }
<h2 style="text-align:center">What emotion was the face expressing?</h2> <div class="wrapper"> <div class="item"> <label for="emotion-happy">Happy</label> <input type="radio" id="emotion-happy" name="emotion"> </div> <div class="item"> <label for="emotion-sad">Sad</label> <input type="radio" id="emotion-sad" name="emotion"> </div> <div class="item"> <label for="emotion-angry">Angry</label> <input type="radio" id="emotion-angry" name="emotion"> </div> <div class="item"> <label for="emotion-confused">Confused</label> <input type="radio" id="emotion-confused" name="emotion"> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.