Form creation, I'd like to make a box act like a radio button. |
Form creation, I'd like to make a box act like a radio button. |
jabob88 |
Nov 16 2018, 03:18 PM
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 |
Nov 16 2018, 03:48 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
What kind of boxes? Checkboxes?
|
jabob88 |
Nov 16 2018, 03:59 PM
Post
#3
|
Group: Members Posts: 6 Joined: 16-November 18 Member No.: 26,753 |
|
pandy |
Nov 16 2018, 06:10 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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 |
Nov 16 2018, 06:45 PM
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 |
Nov 16 2018, 08:01 PM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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 |
Nov 17 2018, 03:42 AM
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 |
Nov 17 2018, 03:46 AM
Post
#8
|
. Group: WDG Moderators Posts: 9,656 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 |
Nov 17 2018, 03:50 AM
Post
#9
|
. Group: WDG Moderators Posts: 9,656 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 |
Nov 17 2018, 04:29 AM
Post
#10
|
. Group: WDG Moderators Posts: 9,656 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 |
Nov 17 2018, 09:50 AM
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 |
Nov 17 2018, 11:50 AM
Post
#12
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
You're welcome.
|
pandy |
Nov 18 2018, 04:00 AM
Post
#13
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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 |
Jan 14 2019, 08:40 AM
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: 23rd April 2024 - 01:56 AM |