← back to all snippets

Quiz Answer Styles for Single & Multiple Choice Questions

Updated 2 years ago
by Dave Warfel

Here’s a simple way to use some custom CSS to change the background color and text color of LearnDash quiz answers when using single & multiple choice questions.

.learndash .wpProQuiz_content .wpProQuiz_questionListItem label {
	border: 0;
	border-radius: 10px;
	background-color: salmon;
	color: darkblue;
}
.learndash .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_questionList[data-type="single"] .wpProQuiz_questionListItem label:hover,
.learndash .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_questionList[data-type="single"] .wpProQuiz_questionListItem label:focus,
.learndash .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_questionList[data-type="multiple"] .wpProQuiz_questionListItem label:hover,
.learndash .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_questionList[data-type="multiple"] .wpProQuiz_questionListItem label:focus {
	background-color: purple;
	color: white;
}

background-color is obviously for the background. color is for the text color. You can change the values to anything you’d like, including using hexadecimal codes like #c93636.

border: 0; removes the default 2px border that LearnDash applies. You can leave this out to keep the border, or use this line instead to change the border thickness, style, and color.

border: 1px solid #000;

border-radius: 10px; changes the default LearnDash border radius. You can omit this line, change the value to anything you’d like, or set to 0 to remove the border-radius altogether.

If you’re using the Design Upgrade for LearnDash plugin (free or pro), you’ll want to use this CSS instead. We’re just adding .ldx-plugin before each CSS statement.

.ldx-plugin .learndash .wpProQuiz_content .wpProQuiz_questionListItem label {
	border: 0;
	border-radius: 10px;
	background-color: salmon;
	color: darkblue;
}
.ldx-plugin .learndash .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_questionList[data-type="single"] .wpProQuiz_questionListItem label:hover,
.ldx-plugin .learndash .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_questionList[data-type="single"] .wpProQuiz_questionListItem label:focus,
.ldx-plugin .learndash .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_questionList[data-type="multiple"] .wpProQuiz_questionListItem label:hover,
.ldx-plugin .learndash .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_questionList[data-type="multiple"] .wpProQuiz_questionListItem label:focus {
	background-color: purple;
	color: white;
}

All CSS code should either be placed in a child theme’s main CSS file (typically style.css), or the Additional CSS area of the WordPress Customizer.

CSS Video

Report

Harassment or bullying behavior.
Contains misleading or false information.
Contains abusive or derogatory content.
Contains spam, fake content or potential malware.

Block Member?

Please confirm you want to block this member.

You will no longer be able to:

  • See blocked member's posts
  • Mention this member in posts

Please allow a few minutes for this process to complete.

Report

You have already reported this .

How to Add CSS to Your Site

Forum Rules

Be Kind & Patient

We’re here to learn and/or help each other. Please don’t be mean, rude, or condescending. Treat all members the way you should be treating dogs and your elders—with the utmost love & respect.

External Links

✅ Other websites that add value, help solve problems & contribute to the discussion. ❌ Affiliate links are prohibited. (Site owners may use affiliate links to help support the site.)

Promotion

✅ You may promote your own products/services if they are relevant to an existing discussion. You must disclose your relationship with the product(s).
❌ You may not create new posts simply to promote your products.

Non-LearnDash Topics

❌ General (free) Forum: Only LearnDash-specific topics are allowed.
✅ Premium Forums: You are allowed to post other questions tangentially related to LearnDash. Please use the appropriately named forum. If it doesn’t exist, use the “LearnDash Integrations” forum.

Our Right to Remove

We reserve the right to remove any content, at any time, for any reason. We can also merge one post with another. We will exercise caution when removing content and always try to provide an explanation.