When using HTML and CSS, how can I apply a class to a field that is already read-only?

Question

Here's my dilemma: I have jQuery code with an if-statement that applies a specific class to an element based on the value selected on a page where the user is filling out a form. I also built another form where a user can view the details of a form that has already been filled out. When the details page is displayed, most of the class is applied, but the grey "read-only" background overwrites the background color from the original class. I don't really want to go into the bootstrap files and adjust the read-only background color code if I can avoid it. How can I apply the full class (including the background color) to an element that is read-only?

Snippet of code from the "Create" page:

<div class="col-md-12">
                <div class="col-md-10">
                    @Html.LabelFor(model => model.Question1, htmlAttributes: new { @class = "control-label" })
                </div>
                <div class="col-md-2">
                    @Html.DropDownListFor(model => model.Question1, new[] { new SelectListItem() { Text = "Pass", Value = "Pass" }, new SelectListItem() { Text = "Fail", Value = "Fail" }, new SelectListItem() { Text = "NA", Value = "NA" } }, "Select an option", htmlAttributes: new { @class = "form-control text-box centerline", @onchange = "updateEscalationsListeningScore()", id = "question1Answer" })
                    @Html.ValidationMessageFor(model => model.Question1, "", new { @class = "text-danger" })
                </div>
            </div>

jQuery from the "Create" page:

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;
    }

---

Snippet of code from the "Details" page:

<div class="col-md-12">
                <div class="col-md-10">
                    @Html.LabelFor(model => model.Question1, htmlAttributes: new { @class = "control-label" })
                </div>
                <div class="col-md-2">
                    @Html.EditorFor(model => model.Question1, new { htmlAttributes = new { @class = "form-control text-box centerline", id = "question1Answer", @readonly = "readonly" } })
                    @Html.ValidationMessageFor(model => model.Question1, "", new { @class = "text-danger" })
                </div>
            </div>

jQuery from the "Details" page:

        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;
    }

---

CSS

.correctListeningAnswer {
background-color: #c6efce;
color: #006100;}

.incorrectListeningAnswer {
background-color: #ffc7ce;
color: #9c0006;}

.naListeningAnswer {
background-color: #ffeb9c;
color: #9c5700;}

Thank you in advance for your help.

Cory

Answer 1

Thank you, everyone, for the information. I researched a few things that you guys all suggested and it looks like I was able to get it to work. What's frustrating is that the answer was really simple, and the way I was able to get there was by using CBroe's method. I just had to add this to my CSS file:

.correctListeningAnswer[readonly] {
background-color: #c6efce;
color: #006100;
}

.incorrectListeningAnswer[readonly] {
background-color: #ffc7ce;
color: #9c0006;
}

.naListeningAnswer[readonly] {
background-color: #ffeb9c;
color: #9c5700;
}

I appreciate all of your help!

Answer 2

Don't make the field readonly , make it disabled . Then your background will work.

Here's an example:

 input { background-color:#ffc; } 

 <input type="text" disabled> 

Or (and I personally think this is the better approach), don't use a form field to display information. Grab the data from the initial form and then display it in more semantically correct elements, like span , which aren't editable in the first place.

 document.querySelector("button").addEventListener("click", function(){ document.getElementById("dataOut").textContent = document.getElementById("dataIn").value; }); 

 <input id="dataIn"> <button type="button">Simulate a submit</button> <span id="dataOut"></span> 

As a last resort, you could always make your class selector more specific than the Bootstrap selectors, so that yours will take precedence.