Build Custom Styles for LearnDash Quiz Questions

Have you ever wanted your answers displayed inline (next to each other) instead of stacked? How about using an actual blank line for fill-in-the-blank questions?

In this tutorial, I’ll explain how you can use custom CSS to design your quiz questions in various ways.

NOTE
It’s very difficult to actually edit the HTML <form> elements of a LearnDash quiz, so we are limited to only what CSS can do. But let’s get creative!

• Inline answers for single/multiple choice questions
• Blank underlines for fill-in-the-blank questions

If you’re intimidated by CSS, or just want the easy way to do this, check out all 70+ options in the LearnDash Quiz Customizer plugin. Here’s a quick sample of a few question styles available in the plugin:

Recommended Product

Inline Answers for Single/Multiple Choice Questions

For single & multiple choice questions, LearnDash stacks all answer choices one on top of the other. This might work fine for most people, but if you have really short answers, or only 2 or 3 choices, you might want your answers to appear side-by-side, or inline.

How to Handle Mobile Devices

Since mobile devices & smaller screens only have but so much room, we’re going to wrap all of our CSS in a media query. A media query is fancy way to say that we’re only going to apply this CSS on a particular screen size. In this case, I’m going to say 600px and higher.

The media query looks like this:

@media (min-width: 600px) {
	...CSS here...
}

Now our code will only apply to screens that are 600px wide or larger.

Forcing Questions Inline

Now let’s bring all answers inline, next to each other. To do this, we’ll use a popular CSS property called Flexbox.

.learndash .wpProQuiz_content .wpProQuiz_questionList[data-type="single"] {
	display: flex;
	flex-wrap: wrap;
}

Take note of the [data-type="single"] part of the code. This means it will be applied to single choice questions only.

If you want to apply it to multiple choice questions, simply replace single with multiple. In most cases, you’ll probably want to apply it to both, in which case you can combine them like this:

.learndash .wpProQuiz_content .wpProQuiz_questionList[data-type="single"],
.learndash .wpProQuiz_content .wpProQuiz_questionList[data-type="multiple"] {
	display: flex;
	flex-wrap: wrap;
}

We include the flex-wrap: wrap; in case your answers reach the edge of the container. We don’t want them to get cut off, so we need to tell CSS to make them wrap onto a new line.

Margin

By default, LearnDash only places a bottom margin on each answer. This is fine when they are stacked, but when we move them next to each other, we’ll also want some space in between them.

I like to use relative units (ems or rems), but feel free to adjust to pixels (px) if that’s more comfortable for you. You’ll see 4 values for margin in the code below. They apply to the 4 sides of each answer, in this order:

top right bottom left

So we’re adding a right and a bottom margin of 0.5em to each list item inside the list of answers.

Recommended Product

.learndash .wpProQuiz_content .wpProQuiz_questionList[data-type="single"] .wpProQuiz_questionListItem,
.learndash .wpProQuiz_content .wpProQuiz_questionList[data-type="multiple"] .wpProQuiz_questionListItem {
	margin: 0 0.5em 0.5em 0;
}

Here’s the final code, applied to both single & multiple choice questions, including the media query. Feel free to adjust to something other than 600px to fit your needs.

@media (min-width: 600px) {
	.learndash .wpProQuiz_content .wpProQuiz_questionList[data-type="single"],
	.learndash .wpProQuiz_content .wpProQuiz_questionList[data-type="multiple"] {
		display: flex;
		flex-wrap: wrap;
	}
	.learndash .wpProQuiz_content .wpProQuiz_questionList[data-type="single"] .wpProQuiz_questionListItem,
	.learndash .wpProQuiz_content .wpProQuiz_questionList[data-type="multiple"] .wpProQuiz_questionListItem {
		margin: 0 0.5em 0.5em 0;
	}
}

Blank Underlines for Fill-in-the-Blank Questions

LearnDash uses a light grey background color for answers within a fill-in-the-blank question. Wouldn’t it be nice to use an actual blank instead?

HTML Markup

Before we get into the CSS, it’s important to know how these questions are structured. Each fill-in-the-blank answer consists of a <span> tag with an <input> inside of it.

Reset CSS

LearnDash chose to apply some styling to the <span> tag, but I feel like applying styles to the <input> gives us more flexibility. So the first thing we’re going to do is get rid of all the styles on the <span>.

.learndash .wpProQuiz_content .wpProQuiz_questionList[data-type="cloze_answer"] .wpProQuiz_questionListItem .wpProQuiz_cloze {
	display: inline-block;
	margin: 0 .1875em;
	padding: 2px;
	background: none;
	border: 0;
	border-radius: 0;
}

This should wipe clear all the default LearnDash styles, and allow us to apply what we want to the <input>.

Create Underlines

.learndash .wpProQuiz_content .wpProQuiz_questionList[data-type="cloze_answer"] .wpProQuiz_questionListItem .wpProQuiz_cloze input[type="text"] {
	height: auto;
	margin: 0;
	padding: 0.125em 0.25em;
	background: transparent;
	border: 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
}

I’ll briefly explain what this code is doing:

• height: auto; ensures that the blank matches the height of the surrounding text
• The padding adds small spaces to the left & right of the underline, as well as between the line and the text that a user enters
• background: transparent; removes the default background color that is usually applied to other <input> fields on your site
• border: 0; removes any border that might be applied to other <input>s
• The border-bottom adds a 1px solid border (which creates the underline). The currentColor ensures the border matches the surrounding text color.
• And the border-radius is set to 0 to make sure our line is perfectly straight and not curved at the ends

Dashed Underline

To use a dashed underline instead of a solid one, simply replace the border-bottom line with this (replacing “solid” with “dashed”):

border-bottom: 1px dashed currentColor;

Change Color on :focus

<input> elements have a :focus state, which is when they are currently in focus (or selected). This happens when the cursor is currently active inside the element. Thanks to CSS, we can apply a different style to indicate when the <input> is in focus.

In this example, I’ll change the color of the bottom border, as well as add an additional 1px box shadow that appears inside the <input>, giving the appearance that the underline grows to 2px thickness.

.learndash .wpProQuiz_content .wpProQuiz_questionList[data-type="cloze_answer"] .wpProQuiz_questionListItem .wpProQuiz_cloze input[type="text"]:focus {
	background: transparent;
	border-color: #000;
	box-shadow: inset 0 -1px 0 0 #000;
}

• I set the background to transparent in case other theme styles are adding background colors when an <input> is in focus
• We then set the border-color. I used black (#000) but you can use any color you’d like.
• And finally, we set an inset box-shadow with a -1px offset on the y-axis, and set it’s color to match the border color

That’s all for now, but as I come up with new ideas for LearnDash quiz question styles, I’ll add them to this post.

If you’ve come up with any of your own custom CSS for LearnDash quizzes, please share in the comments.