![]() |
![]() ![]() |
![]() |
jabob88 |
![]()
Post
#1
|
Group: Members Posts: 6 Joined: 16-November 18 Member No.: 26,753 ![]() |
I'm creating a survey for someone and they have asked if the boxes could act as the selection but i am unsure how to achieve this so any help in this area would be greatly appreciated.
Regards Jacob |
Christian J |
![]()
Post
#2
|
. ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 9,685 Joined: 10-August 06 Member No.: 7 ![]() |
What kind of boxes? Checkboxes?
|
jabob88 |
![]()
Post
#3
|
Group: Members Posts: 6 Joined: 16-November 18 Member No.: 26,753 ![]() |
|
pandy |
![]()
Post
#4
|
🌟Computer says no🌟 ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 20,736 Joined: 9-August 06 Member No.: 6 ![]() |
Boxes or buttons? And how do you mean? You click a box or button and it changes color. What more should happen?
|
jabob88 |
![]()
Post
#5
|
Group: Members Posts: 6 Joined: 16-November 18 Member No.: 26,753 ![]() |
Boxes or buttons? And how do you mean? You click a box or button and it changes color. What more should happen? I'd like it if i could have 5 boxes in a row that acted like a radio button style but in a form that when its submitted it will send the data via an email |
pandy |
![]()
Post
#6
|
🌟Computer says no🌟 ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 20,736 Joined: 9-August 06 Member No.: 6 ![]() |
Still confused. Do you want checkboxes (the square ones) to act as radio buttons (the round ones)?
|
jabob88 |
![]()
Post
#7
|
Group: Members Posts: 6 Joined: 16-November 18 Member No.: 26,753 ![]() |
Still confused. Do you want checkboxes (the square ones) to act as radio buttons (the round ones)? I'd like a likert scale like these but rather than radio buttons i'd like boxes with the text inside to act as the radio buttons. https://codepen.io/Buttonpresser/pen/qiuIx |
Christian J |
![]()
Post
#8
|
. ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 9,685 Joined: 10-August 06 Member No.: 7 ![]() |
To elaborate, checkboxes and radio buttons have different function: https://www.nngroup.com/articles/checkboxes...-radio-buttons/
The appearance can be customized a little, but it's best not to confuse users about what is what. Making a checkbox look round (or a radio button look square) is not a good idea at all, even if it probably can be done one way or another. |
Christian J |
![]()
Post
#9
|
. ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 9,685 Joined: 10-August 06 Member No.: 7 ![]() |
I'd like a likert scale like these but rather than radio buttons i'd like boxes with the text inside to act as the radio buttons. https://codepen.io/Buttonpresser/pen/qiuIx You could make the actual radio button invisible with CSS. If you then wrap the text and radio button in a LABEL element, clicking the text activates the invisible radio button. I'll post an example in a few minutes. |
Christian J |
![]()
Post
#10
|
. ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 9,685 Joined: 10-August 06 Member No.: 7 ![]() |
Here's a simple example. Keep in mind that users may not realize that the labels are clickable. Older browsers may not support it either.
CSS CODE input[type=radio] {opacity: 0;} input[type=radio]:checked ~ span {color: red;} HTML CODE <label><input type="radio" name="rating" value="1" checked><span>Foo</span></label> <label><input type="radio" name="rating" value="2"><span>Bar</span></label> <label><input type="radio" name="rating" value="3"><span>Baz</span></label> |
jabob88 |
![]()
Post
#11
|
Group: Members Posts: 6 Joined: 16-November 18 Member No.: 26,753 ![]() |
That i can work with. Thank you very much for your help.
Regards Jacob |
Christian J |
![]()
Post
#12
|
. ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 9,685 Joined: 10-August 06 Member No.: 7 ![]() |
You're welcome.
|
pandy |
![]()
Post
#13
|
🌟Computer says no🌟 ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 20,736 Joined: 9-August 06 Member No.: 6 ![]() |
Keep in mind that users may not realize that the labels are clickable. Older browsers may not support it either. Yes. Not an entirely good idea. Instructive text is probably needed, like "choose one of the below". Basically, form controls shouldn't be too much messed with. |
aresourcepool |
![]()
Post
#14
|
Group: Members Posts: 4 Joined: 14-January 19 Member No.: 26,796 ![]() |
Use real radio buttons followed by a label like this:
<input type="radio" name="rGroup" value="1" id="r1" checked="checked" /> <label class="radio" for="r1"></label> Using CSS to show radio buttons like a box: .radios input[type=radio] {display:none} .radios .radio {background-color: #c5e043;display: inline-block;width: 10px;height: 10px;cursor: pointer;} .radios input[type=radio] {display: none;} .radios input[type=radio]:checked + .radio {background-color: #241009;} <div class="radios"> <input type="radio" name="rGroup" value="1" id="r1" checked="checked" /> <label class="radio" for="r1"></label> <input type="radio" name="rGroup" value="2" id="r2" /> <label class="radio" for="r2"></label> <input type="radio" name="rGroup" value="3" id="r3" /> <label class="radio" for="r3"></label> </div> |
![]() ![]() |
![]() |
Lo-Fi Version | Time is now: 10th June 2024 - 03:12 PM |