Is there a master list of all the question labels used in CSS? | Experience Community
Skip to main content

Is there a master list of all the question labels used in CSS?

  • June 24, 2022
  • 3 replies
  • 632 views
J
Forum|alt.badge.img

Hi All! I am teaching myself how to write CSS code for qualtrics surveys and so far not doing too badly (thanks to this community). Where I am primarily stuck is knowing what the label (skin) names are for each of the question types and elements.
I have listed some of them below and I am sort of figuring out what each of these elements represent, but it is hit or miss in some cases. I also find that I am missing some, or unable to change certain things. there must be a master reference list somewhere, yes? Can someone help?
.Skin .InputText
.Skin label.MultipleAnswer
.Skin label.MultipleAnswer.q-focused
.Skin label.SingleAnswer
.Skin label.q-checkbox
.Skin label.q-radio
.Skin .Matrix .table-cell
.Skin .q-matrix .answered-indicator span
.Skin .q-matrix .table-cell

    3 replies

    J
    Forum|alt.badge.img
    • JoshuaYork
    • September 6, 2023

    I’d love a comprehensive reply to this!

      Nam Nguyen
      QPN Level 8 ●●●●●●●●
      Forum|alt.badge.img+29
      • Nam Nguyen
      • QPN Level 8 ●●●●●●●●
      • September 6, 2023

      I’d love a comprehensive reply to this!

      I do think there’s a master reference list somewhere but it should be a Qualtrics internal document. I mean they have their own customize service, can’t public that element list.
      Meanwhile we just gonna inspect everything with F12, a little investigation.

      Nam Nguyen - XM Technology Consultant | DXCON Vietnam
      Tom_1842
      Level 8 ●●●●●●●●
      Forum|alt.badge.img+28
      • Tom_1842
      • Level 8 ●●●●●●●●
      • September 6, 2023

      You can view the entire stylesheet if you want by inspecting an element with F12 and then opening the stylesheet.css in a new browser tab. Below is the one in place for the surveys on the Qualtrics template page.

      https://qwebsite.qualtrics.com/jfe/themes/skins/qwebsite/qxm_2/version-1649633096689-bd2e94/stylesheet.css

      To see the parsed/beautified version of the stylesheet, just click on the stylesheet.css to view in the Sources tab of the Developer Console instead of opening in a new browser tab. Or, hit F12 to open the Developer Console, go the the Network tab, filter for CSS requests, and then Preview. You might need to Ctrl+R in this view to record the loading of the stylesheet.

      Also, using Developer Console in Chrome, you can click the 3 vertical dots in the top right, then "More Tools", then "CSS Overview" to get an idea of how many Style rules are in place, various colors being used, etc.

        Terms & ConditionsAccessibility statement