Put box around question button on click | XM Community
Solved

Put box around question button on click

  • 18 December 2019
  • 5 replies
  • 44 views
A
Rank
Userlevel 3
Badge +11
  • AxelS
  • QPN Level 2 ●●
  • 35 replies
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
icon

Best answer by Mishraji 26 December 2019, 22:06

View original

5 replies

Mishraji
Rank
Userlevel 4
Badge +18
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.
IsabelPosada_Voce
Rank
Userlevel 6
Badge +51
@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? 😶
Isa
A
Rank
Userlevel 3
Badge +11
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.
Mishraji
Rank
Userlevel 4
Badge +18
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.
A
Rank
Userlevel 3
Badge +11
> @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