CSS for slider elements? | XM Community
Question

CSS for slider elements?

  • 24 June 2020
  • 3 replies
  • 113 views

I am trying to customize the font size and placement of some slider elements. This is my first attempt at implementing custom CSS in Qualtrics. It doesn't help that I'm not very experienced with CSS either. Here is the slider as is:
slider.pngI'm trying to figure out how to adjust the font size/styling on the labels as well as the "No association" box. Using the element inspector, I found the labels in a div with class 'labels-container' and the "No association" box contained in a div with class 'n-a-container'. I added the following with no results (with or without !important):
 .n-a-container  {
font-size: 10px;
}

.labels-container {
font-size: 14px;
}

Any thoughts on why this isn't working? I thought maybe the directly-applied styling in each field could be causing the problem and have tried removing that formatting to see if the CSS would then take priority, but no luck there.
And is it possible to adjust the placement of the "No association" checkbox in CSS? I'd like it directly to the right of the slider rather than inbetween if possible.


3 replies

Userlevel 7
Badge +22

Try below css to increase the font size. Put the css in custom css under look and feel.
.JFEScope .Skin .q-slider ul , .JFEScope .Skin .q-slider .n-a-container .answer{
font-size: 20px;
}

Thanks, this works for the "No association" box. I'm still confused as to why my .n-a-container selector wasn't enough though. Is there a general rule to follow?
I'm still trying to work out the selector for the labels.


Userlevel 7
Badge +27

https://www.qualtrics.com/community/discussion/comment/27116#Comment_27116With CSS, the more specific rule takes precedence.

Leave a Reply