Hi! How can I change the appearance of the “don't know” option in a Likert Multiple Choice question?
I'm using the Simple Layout, so I can't use JS on the question but I can use CSS in Look&Feel.
I would like “don't know” (weet niet in Dutch) to look different, for example a square or a grey background.
I know I can edit the tekst, but this is about the circle where the respondent clicks.
Best answer by Tom_1842
Hi, Simple layout appears to use grids when laying out choices. This makes targeting particular rows and columns sort of tricky.
For Multiple Choice questions, there is fortunately an element within each column that takes up the whole cell so this can be selected directly to change the background color. Try using the below CSS, updating the qid for your survey.
#question-QID5 > div > div > div > div > div > div.question-content > div > div:nth-child(1){
background-color:#e8e8e8;
}
The elements within the Matrix grid columns do not take up the whole cell, so I'm not sure if the background of the entire cell can be changed.
Like in your solution though, the radio buttons can be modified to be visually distinct from the rest of the answer options. The CSS to apply that styling to the radio buttons in the first column is below:
You can write JS in look n feel > general header > source in a script tag format for simple layout.
Also, you cannot do for column as matrix identifies statements as each row and not columns. You will have to write JS/CSS for each row’s first radio button separately.
If you had used other layout side by side question type would have solved your problem.
Hi @Deepak, I'm not sure what your mean. So I with the Simple Layout I can add a script in the header that makes the radio button square, but I cannot do that in the individual question with JS? The script for the general header is not working as it is...
Hi, Simple layout appears to use grids when laying out choices. This makes targeting particular rows and columns sort of tricky.
For Multiple Choice questions, there is fortunately an element within each column that takes up the whole cell so this can be selected directly to change the background color. Try using the below CSS, updating the qid for your survey.
#question-QID5 > div > div > div > div > div > div.question-content > div > div:nth-child(1){
background-color:#e8e8e8;
}
The elements within the Matrix grid columns do not take up the whole cell, so I'm not sure if the background of the entire cell can be changed.
Like in your solution though, the radio buttons can be modified to be visually distinct from the rest of the answer options. The CSS to apply that styling to the radio buttons in the first column is below: