Here is some handy CSS for doing highlights, info boxes, and so on within Qualtric questions. I use them in the HTML edit box with a variety of Qualtrics question-types to create “sign-posts” that guide respondents through questionnaires.
[Note: As of this writing in 2018, Qualtrics currently has some sort of bug. When pasting this code (or seemingly any HTML code) into the “HTML View,” you need to finish editing the question by clicking outside the question. If you end editing by clicking on “Normal View” or elsewhere within the question tself, the HTML code will appear to remain but it will be rendered inert and non-functional. It’s a very nasty bug because it’s hard to diagnose.]
<p style=”text-align:center; color:black; background:LightCyan; font-weight:bolder; border:1px solid PaleTurquoise; padding:5px;”>
Header
</p>
… which looks like this in a Qualtrics question …
Header
<span style=”display:block; color:black; background:Ivory; border: 20px solid DarkCyan; padding:20px;”>
<p style=”text-align:center; color:black; font-weight:bolder; background:PaleTurquoise; padding:6px;border:4px solid DarkCyan; “>
Special Header
</p>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut facilisis purus in lorem volutpat euismod
<ol>
<li>Duis pellentesque arcu ac nunc hendrerit maximus a id libero.</li>
<li>Duis erat turpis, congue nec aliquet et, sollicitudin eget risus.</li>
<li>Ut auctor justo vitae lacus elementum, eget mollis justo porttitor. Donec ut nulla quam.</li>
</ol>
<br>Aenean ullamcorper felis tortor, ullamcorper imperdiet elit ultrices et.
</span>
… which looks like this in a Qualtrics question …
