Printable Version of Topic

Posted by: jabob88 Nov 16 2018, 03:18 PM

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

Posted by: Christian J Nov 16 2018, 03:48 PM

What kind of boxes? Checkboxes?

Posted by: jabob88 Nov 16 2018, 03:59 PM

Like a generic button. so when it is selected it changes colour.

Posted by: 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?

Posted by: jabob88 Nov 16 2018, 06:45 PM

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

Posted by: pandy Nov 16 2018, 08:01 PM

Still confused. Do you want checkboxes (the square ones) to act as radio buttons (the round ones)?

Posted by: jabob88 Nov 17 2018, 03: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

Posted by: Christian J Nov 17 2018, 03:46 AM

To elaborate, checkboxes and radio buttons have different function: https://www.nngroup.com/articles/checkboxes-vs-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.

Posted by: Christian J Nov 17 2018, 03:50 AM

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.

Posted by: Christian J Nov 17 2018, 04:29 AM

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

HTML

Posted by: jabob88 Nov 17 2018, 09:50 AM

That i can work with. Thank you very much for your help.

Regards
Jacob

Posted by: Christian J Nov 17 2018, 11:50 AM

You're welcome.

Posted by: pandy Nov 18 2018, 04:00 AM

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.

Posted by: aresourcepool Jan 14 2019, 08:40 AM

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>