@JohannesCE

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.

<script>
document.getElementById('question-QID3').querySelectorAll('.matrix-statement-items .radio-button')n0].style.borderRadius="0";
</script>

Update the QID and change the eq “q0]” to whichever row you want repeat the process it will make your radio button to square.

Hope it helps!

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

@JohannesCE

JavaScript is enabled in simple layout as well. You need to update the QID with your Questions id and it will work.

You can include this onload without script tag as well. 

Hope it helps!

@Deepak, still not working.

What am I doing wrong?

BTW, in the Classic Layout it works fine:

This is the correct solution to make the first option of matrix questions in Simple Layout square and gray:

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:

div.matrix-statement-items > div:nth-child(1) > div > span > span.radio-button.radio {
border-radius: 0px;
background-color: #e8e8e8;
}

Thank you @Tom_1842, that's actually a way better solution/answer. How would this work in the Classic Layout?