The Qualtrics 2017 theme is a complicated one to customize. Worth considering doing a custom theme through their design team @
https://qualtrics.com/theme-design/
If you want to give it a shot there are a few things I found that can get you started in the right direction (Note that styles can be added in the _HTML view_ option on the question editor or in Look & Feel -> Advanced -> Add Custom CSS).
The difference in these and most of the other themes requires adding the span::before to modifies the radio button/check-boxes themselves rather than the entire button background.
Radio buttons:
.Skin label.SingleAnswer.q-checked span::before,
.Skin label.SingleAnswer.q-checked.q-focused span::before {
border: 2px solid #000000;
background: #000000!important;
}
Multi-selects:
.Skin label.MultipleAnswer.q-checked span::before,
.Skin label.MultipleAnswer.q-checked.q-focused span::before{
background:#000000!important;
border-color:#000000;
border:#000000;
}
This just covers the checkbox with a color... to get the pretty check you need to also add a check image to the style:
.Skin label.q-checkbox.q-checked{
background-image:url(//YourImagePath/check.png);
background-position:center center;
background-repeat:no-repeat;
}
When I used the Multi-selects code as written in this post, it did not change the border color, but my designated color did fill the box. Is there another way to get the blue outline from the Qualtrics 2017 theme of the check-boxes to change to a different color? (A different term that's recognized by CSS, for example.)
