How do I change the color of check boxes in Qualtrics 2017 theme?

Question

Looking for someone to provide the correct CSS code to change color of checkboxes in Qualtrics 2017 theme (and the blank styling theme).

Rich_Boits_Walker · Accepted Answer

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;    }

slsc_org · Answer

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.)

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded