- Posts: 222
- Thank you received: 10
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Styling radio elements as checkboxes and vice versa
- krosser
- Topic Author
- Offline
- Elite Member
I would like to style radio elements in a list (radio) question to look like checkboxes and the other way round - checkboxes in a multiple-choice question as radio elements. I need that for style consistency of questions in different modules/groups. I guess it should be possible with JS, right? Searching for similar threads didn't give anything. Would appreciate any advice. Thanks!
I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
- DenisChenu
- Offline
- LimeSurvey Community Team
- Posts: 13597
- Thank you received: 2487
Else start by something like this at end of your template.css
.radio-item label::before { border-radius: 3px; } .radio-item input[type="radio"]:checked + label::after { font-family: "FontAwesome"; content: "\f00c"; } .checkbox-item label::before { border-radius: 50%; } .checkbox-item input[type="checkbox"]:checked label::after { background:#000; border-radius: 50%; content: ""; }
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
- holch
- Offline
- LimeSurvey Community Team
- Posts: 11639
- Thank you received: 2737
Design should not change this learned behaviour, it would be a usability disaster.
I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
- jelo
- Offline
- Platinum Member
- Posts: 5033
- Thank you received: 1257
Let's wait for the reason. Perhaps to have subquestion relevance on single choice question?holch wrote: Design should not change this learned behaviour, it would be a usability disaster.
I have learned, that e.g. radio button click cannot be taken back. You had to place a reset button in that form.
But most forms and survey-tools now allow to remove a radio button click and make the question unanswered. Not the default behavior, but an improvement. LimeSurvey follows the old way (once radio button is clicked, you cannot make the question unanswered).
The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users
- DenisChenu
- Offline
- LimeSurvey Community Team
- Posts: 13597
- Thank you received: 2487
Totally unaccessible and not a11y or RGAA compatible …jelo wrote: But most forms and survey-tools now allow to remove a radio button click and make the question unanswered. Not the default behavior, but an improvement. …
IOf not because other tool don't care about accessibility we must don't care too …
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
- jelo
- Offline
- Platinum Member
- Posts: 5033
- Thank you received: 1257
I don't force anyone to care. I personally don't care about radio button deselction. I just described surveytools out of the LimeSurvey bubble People will come, check and then leave or stick. Voting with the feet is the strongest signal. E.g. www.limesurvey.org/forum/can-i-do-this-w...ecking-radio-buttonsDenisChenu wrote: Of not because other tool don't care about accessibility we must don't care too …
The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users
- krosser
- Topic Author
- Offline
- Elite Member
- Posts: 222
- Thank you received: 10
DenisChenu wrote: ???? Tell me a real good reason to do this …
Else start by something like this at end of your template.css
Code:.radio-item label::before { border-radius: 3px; } .radio-item input[type="radio"]:checked + label::after { font-family: "FontAwesome"; content: "\f00c"; } .checkbox-item label::before { border-radius: 50%; } .checkbox-item input[type="checkbox"]:checked label::after { background:#000; border-radius: 50%; content: ""; }
Thanks for the hint. It doesn't look nice in the latest LS version but gives something to play around.
The reason for changing them is that it was requested by a colleague. There are 2 question groups and in one there are multiple choice questions but set as radio lists, using exclusive choices on some or all answer choices. I had to use the multiple-choice type because it is the only one that has comments setting to each answer. When using the radio list, you don't have such an option. I just had to hide some comment boxes in certain questions. There is only one question that has no comment boxes and that is why a simple radio list could be used. The request was to make it look like the rest of the questions in the group, that is all.
I hope that clarifies a bit.
I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
- krosser
- Topic Author
- Offline
- Elite Member
- Posts: 222
- Thank you received: 10
holch wrote: Radio buttons and check boxes are not a layout or design choice, but people have actually learned that those things have different behaviours. users generally know that you can only choose one option out of several radio buttons and that you can mark more than one check box in a set of check boxes.
Design should not change this learned behaviour, it would be a usability disaster.
Well, unfortunately, it is not always the case and people who rarely fill out surveys don't know or care about the common usage of icons, symbols, etc. And some people prefer consistency in styling in one single survey regardless of other surveys.
I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
- holch
- Offline
- LimeSurvey Community Team
- Posts: 11639
- Thank you received: 2737
people who rarely fill out surveys don't know or care about the common usage of icons, symbols, etc.
I agree with your point that they don't care.
However, generally user research shows that they want it to work as they are used to. It generally is long learned behaviour and they get confused when things don't work how they are used to. It is nothing they think about, it is deeply ingrained.
However, from your description I see that it seems to be one of the cases that Jelo is mentioning.
You are are basically using a multipe answer question as if it were a single answer question, because of the limits and question design. So if they can only choose one answer, than the radio box layout is actually the one they would be used to.
I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
- DenisChenu
- Offline
- LimeSurvey Community Team
- Posts: 13597
- Thank you received: 2487
You need a radio button + a comment checkbox.krosser wrote: I just had to hide some comment boxes in certain questions. There is only one question that has no comment boxes and that is why a simple radio list could be used.
Then why not use a manual.limesurvey.org/Question_type_-_List_with_comment question type ( see sample )
You can use expression manager to disable comments on some option (and add some javascript for dynamic set disable on the textearea).
Or more easy : a single choice radio + a long text with relevance condition (and then it's exactly the same desing than other radio list question).
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
- krosser
- Topic Author
- Offline
- Elite Member
- Posts: 222
- Thank you received: 10
A single choice radio + text field can be joined with CSS but it would be too many separate questions in a group inside the LS editor, too problematic for coding.
I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
- tpartner
- Offline
- LimeSurvey Community Team
- Posts: 10099
- Thank you received: 3589
Why not? They can only select one answer so why the need for multiple text inputs? I think Denis' second suggestion is perfect - a list radio followed by a text question displayed conditionally on the radios answer.I need an individual comment box next to several answer choices and one single comment box for all wouldn't work for that.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.