Put box around question button on click | XM Community
Skip to main content
I have an NPS question, for which I added CSS to it's buttons so it has a gradient of colors like this:



!



The CSS code that I used for the first button is:



label#QID1-0-label.SingleAnswer{

background-color :#B61C1E !Important;

color: white;

}



Before, when I clicked any of the buttons, a box would appear around the button, but now it doesn't appear anymore, so the person taking the survey can't see what they have selected. How would you do in CSS to add box around the button on click?



Thanks
Add below CSS code for each button:



label#QID11-0-label.SingleAnswer.q-checked{

border-style: solid;

border-color: black;

}



You can have your desired border style and color.
@AxelS and @Mishraji Hi Guys thanks for sharing, I have always wanted to do that but I don´t know a lot about CSS. Do you know where I can find more of this kind of things easy to do? 😶
Hi @IsabelPosada, I don't know CSS either, but there are other threads here related to CSS that have some code, so with that code and a bit of trial and error I ended up doing that gradient of colors.
Hi @IsabelPosada, You can find plenty of content on CSS and how to identify CSS selector of an element on the internet. In my opinion, websites such as w3schools and tutorialspoint are a good place to start with.
> @Mishraji said:

> Add below CSS code for each button:

>

> label#QID11-0-label.SingleAnswer.q-checked{

> border-style: solid;

> border-color: black;

> }

>

> You can have your desired border style and color.

>



Hi @Mishraji , I have a similar question: I want to do something similar but using the Flat layout, but now the radio button disappears when clicked. Do you happen to know which CSS code would prevent that?



!



!



Thanks!

Leave a Reply


Terms & Conditions