Put box around question button on click | XM Community
Skip to main content
Solved

Put box around question button on click

  • December 18, 2019
  • 5 replies
  • 82 views
A
QPN Level 2 ●●
Forum|alt.badge.img+11
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

Best answer by Mishraji

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.

    5 replies

    Mishraji
    Level 4 ●●●●
    Forum|alt.badge.img+18
    • Mishraji
    • Level 4 ●●●●
    • Answer
    • December 26, 2019
    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
      QPN Level 5 ●●●●●
      Forum|alt.badge.img+57
      @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
      QPN Level 2 ●●
      Forum|alt.badge.img+11
      • AxelS
      • Author
      • QPN Level 2 ●●
      • January 5, 2020
      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
        Level 4 ●●●●
        Forum|alt.badge.img+18
        • Mishraji
        • Level 4 ●●●●
        • January 6, 2020
        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
          QPN Level 2 ●●
          Forum|alt.badge.img+11
          • AxelS
          • Author
          • QPN Level 2 ●●
          • January 21, 2020
          > @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!
          Terms & ConditionsAccessibility statement