Question

so, I have a page which uses a css stylesheet which unfortunately, I can’t modify, This contains:

select {
    color: #333333;
    background-color: #FAFAFA;
    font-family: "Lucida Grande", Verdana, Helvetica, sans-serif;
    font-size: 1.1em;
    font-weight: normal;
    border: 1px solid #A9B8C2;
    padding: 1px;
}

In the same page, I have a

<select id='myid' style='width:400px;'>

which is disabled (I tried both disabled in HTML with disabled or JS’ element.disabled = true with the same result).

The problem is that the select due to the CSS inherited does not look disabled at all (even if it is infact disabled).

How can I best clear the CSS style inherited so that my select, once disabled looks like this? I do not necessarily want to drop the current style, apart from the unwanted side-effect.

Thanks!

Answer 1

so, I have a page which uses a css stylesheet which unfortunately, I
can’t modify

If you can’t modify the stylesheet that sets this:

select {
    background-color: #FAFAFA;
    border: 1px solid #A9B8C2;
}

It’s impossible to revert the <select> back to the native version.

---

The problem is that the select due to the CSS inherited does not look
disabled at all (even if it is infact disabled).

In that case, I think you should do this:

select[disabled] {
    border: 1px solid red;
    /* whatever you want a disabled select to look like */
}