如何为只读表单元素应用含背景色的自定义CSS类？

Hey Cory, I’ve dealt with this exact Bootstrap specificity conflict before—let me walk you through how to fix it without modifying Bootstrap’s source code.

Why This Happens #

Bootstrap applies a background color to readonly form controls using a selector with higher CSS specificity than your custom classes. For example, Bootstrap’s default rule looks something like this:

.form-control[readonly] {
  background-color: #e9ecef;
}

Since form-control[readonly] combines a class and an attribute selector, it has higher specificity than your standalone .correctListeningAnswer class. That’s why your custom background color gets overridden.

The Fix: Boost Your Custom Class Specificity #

You just need to make your custom selectors match or exceed Bootstrap’s specificity. Here are two clean ways to do this:

Option 1: Target Readonly Elements Directly (Recommended)

Update your CSS to specifically target readonly elements that have your custom classes. This matches Bootstrap’s selector structure and avoids using !important:

/* Base styles for editable state */
.correctListeningAnswer { background-color: #c6efce; color: #006100;}
.incorrectListeningAnswer { background-color: #ffc7ce; color: #9c0006;}
.naListeningAnswer { background-color: #ffeb9c; color: #9c5700;}

/* Override styles for readonly state */
.form-control.correctListeningAnswer[readonly] {
  background-color: #c6efce;
  color: #006100;
}
.form-control.incorrectListeningAnswer[readonly] {
  background-color: #ffc7ce;
  color: #9c0006;
}
.form-control.naListeningAnswer[readonly] {
  background-color: #ffeb9c;
  color: #9c5700;
}

Option 2: Use !important (Quick Fix, Use Sparingly)

If you need a fast solution and don’t anticipate conflicts later, you can add !important to your background color properties. This forces your styles to take precedence:

.correctListeningAnswer { 
  background-color: #c6efce !important; 
  color: #006100;
}
.incorrectListeningAnswer { 
  background-color: #ffc7ce !important; 
  color: #9c0006;
}
.naListeningAnswer { 
  background-color: #ffeb9c !important; 
  color: #9c5700;
}

Just keep in mind that overusing !important can make future CSS maintenance harder, so the first option is better for long-term code health.

Quick Check: Ensure Your jQuery Runs After DOM Loads #

Double-check that your detail page jQuery code is wrapped in a DOM-ready handler to make sure the element exists when you add the class:

$(function() {
  const Q1Answer = $('#question1Answer').val();
  
  if (Q1Answer === "Pass") {
    $('#question1Answer').addClass("correctListeningAnswer").removeClass("incorrectListeningAnswer").removeClass("naListeningAnswer");
    Q1Score = 3;
    Q1PotentialPoints = 3;
  } else if (Q1Answer === "Fail") {
    $('#question1Answer').addClass("incorrectListeningAnswer").removeClass("correctListeningAnswer").removeClass("naListeningAnswer");
    Q1Score = 0;
    Q1PotentialPoints = 3;
  } else if (Q1Answer === "NA") {
    $('#question1Answer').addClass("naListeningAnswer").removeClass("incorrectListeningAnswer").removeClass("correctListeningAnswer");
    Q1Score = 0;
    Q1PotentialPoints = 0;
  } else {
    $('#question1Answer').removeClass("correctListeningAnswer").removeClass("incorrectListeningAnswer").removeClass("naListeningAnswer");
    Q1Score = 3;
    Q1PotentialPoints = 3;
  }
});

That should make your custom background colors show up on readonly elements without touching Bootstrap’s source!

内容的提问来源于stack exchange，提问作者Cory