Hi guys,

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!

???? Tell me a real good reason to do this …

Else start by something like this at end of your template.css

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.

holch wrote: Design should not change this learned behaviour, it would be a usability disaster.

Let's wait for the reason. Perhaps to have subquestion relevance on single choice question?

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).

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. …

Totally unaccessible and not a11y or RGAA compatible …

IOf not because other tool don't care about accessibility we must don't care too …

DenisChenu wrote: Of not because other tool don't care about accessibility we must don't care too …

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-buttons

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.

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.

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.

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.

You need a radio button + a comment checkbox.

Then why not use a www.limesurvey.org/manual/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).

I need an individual comment box next to several answer choices and one single comment box for all wouldn't work for that.
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 need an individual comment box next to several answer choices and one single comment box for all wouldn't work for that.

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.