Selected radio button color using CSS Editor | Experience Community
Skip to main content
Solved

Selected radio button color using CSS Editor

  • November 1, 2018
  • 3 replies
  • 691 views
E
Forum|alt.badge.img+1
We've designed a Qualtrics survey and had a designer enter some code to match the survey to our study website. The designer is no longer on the project and we'd simply like to change the color of a radio button when it is selected. Currently, the radio button fills in white when a choice is selected. We'd like it to be blue (or anything darker really). See the screen shot below for the current design. And the current code used below that. I can't figure out where I should change the color in the code below or if there are additional lines of code. I appreciate any guidance!! Thanks in advance. ! .Skin label.q-radio.q-checked { background-color: #009FAC !important; outline: #9C9C9C } .Skin label.q-checkbox, .Skin label.q-radio { border: 2px solid #0F993D; outline: none; } .Skin label.Matrix.q-checked.q-focused, .Skin label.SingleAnswer.mobile.q-focused:hover { outline: none; } .Skin label.q-radio.q-focused.q-checked { box-shadow: 0 0 4pt 2px #0F993D; } .Skin label.q-radio.q-checked.q-focused { background-color: #0F993D; }

Best answer by Anonymous

Hello @ErikS , Paste the below code in the Add custom CSS in the Look and Feel .Skin label.SingleAnswer.q-checked.q-focused>span::before, .Skin label.SingleAnswer.q-checked>span::before,.Skin label.q-radio.q-checked, .Skin label.q-radio.q-checked.q-focused { border: 2px solid blue; background: blue!important; }

    3 replies

    A
    • Anonymous
    • Answer
    • November 1, 2018
    Hello @ErikS , Paste the below code in the Add custom CSS in the Look and Feel .Skin label.SingleAnswer.q-checked.q-focused>span::before, .Skin label.SingleAnswer.q-checked>span::before,.Skin label.q-radio.q-checked, .Skin label.q-radio.q-checked.q-focused { border: 2px solid blue; background: blue!important; }
      E
      Forum|alt.badge.img+1
      • ErikS
      • Author
      • November 1, 2018
      Awesome!!! That works perfectly. Thanks for your help!!
      G
      Level 2 ●●
      Forum|alt.badge.img+3
      • giuliopalma
      • Level 2 ●●
      • May 2, 2024

      Hi @Anonymous 
      I have a similar issue.
      In my case I would like to change the colour of the radio button from white to black and mantain the grey background. 
      Any advise on how to change my CSS code to achieve this ? I am on a flat layout
       

      Terms & ConditionsAccessibility statement