The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Form creation, I'd like to make a box act like a radio button.
jabob88
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 16 2018, 03:48 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



What kind of boxes? Checkboxes?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jabob88
post Nov 16 2018, 03:59 PM
Post #3





Group: Members
Posts: 6
Joined: 16-November 18
Member No.: 26,753



QUOTE(Christian J @ Nov 16 2018, 03:48 PM) *

What kind of boxes? Checkboxes?


Like a generic button. so when it is selected it changes colour.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 16 2018, 06:10 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jabob88
post Nov 16 2018, 06:45 PM
Post #5





Group: Members
Posts: 6
Joined: 16-November 18
Member No.: 26,753



QUOTE(pandy @ Nov 16 2018, 06:10 PM) *

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 16 2018, 08:01 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Still confused. Do you want checkboxes (the square ones) to act as radio buttons (the round ones)?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jabob88
post Nov 17 2018, 03:42 AM
Post #7





Group: Members
Posts: 6
Joined: 16-November 18
Member No.: 26,753



QUOTE(pandy @ Nov 16 2018, 08:01 PM) *

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 17 2018, 03:46 AM
Post #8


.
********

Group: WDG Moderators
Posts: 9,630
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 17 2018, 03:50 AM
Post #9


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(jabob88 @ Nov 17 2018, 09:42 AM) *

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.


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 17 2018, 04:29 AM
Post #10


.
********

Group: WDG Moderators
Posts: 9,630
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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jabob88
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 17 2018, 11:50 AM
Post #12


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



You're welcome.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 18 2018, 04:00 AM
Post #13


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(Christian J @ Nov 17 2018, 10:29 AM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
aresourcepool
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 12:13 PM