Question

I have the following css settings:

.dropdown dt { background:#e4dfcb !important; }
.dropdown-disabled { background:#dddddd important; color:#aaaaaa; }

So in my html code, I purposely put dropdown-disabled class in there, which should force an override of the background color… but is not happening.

<dt id="dtTestID" class="dropdown-disabled">
   <a href="#"><span>Hello World</span></a>
</dt>

What am I doing wrong? Ugh…

EDIT:

Ok, I’ve updated the code to the following:

.dropdown-enabled { background:#e4dfcb; }
.dropdown-disabled { background:#dddddd; }

.dropdown dt { background:#e4dfcb !important url(arrow.png) no-repeat scroll right center; }
.dropdown dt a { display:block; padding-right:20px; border:1px solid #d4ca9a; width:150px;}
.dropdown dt a:hover { color:#ffffff; border: 1px solid #d0c9af;}
.dropdown dt a span { color:#816c5b; cursor:pointer; display:block; padding:5px; }
.dropdown dt a span:hover { color:#ffffff; cursor:pointer; display:block; }

<dt id="dtTestID" class="dropdown-disabled"><a href="#"><span>Hello World</span></a></dt>

This works for the background, I just need to put dropdown-enabled everywhere else. However, I now run into another (similar) problem, I can’t override the link’s style. I tried the following…

Overriding the color to !important, and set my disabled to a new color.

.dropdown dt a span { color:#816c5b !important; cursor:pointer; display:block; padding:5px; }
.dropdown-disabled { background:#dddddd; color:#aaaaaa; }

Any idea?

Answer 1

Found a work around…
I had to remove the link from my dt, then update my css with the following:

.dropdown-enabled { background:#e4dfcb; }
.dropdown-disabled span { background:#dddddd; color:#aaaaaa; }

After that I need to use jQuery to monitor mouse click on other element to manually toggle to enabled… and reinsert the link back.

var dt = jQ(this).find("dt");
// put back the look of enabled the element
dt.removeClass("dropdown-disabled");
dt.addClass("dropdown-enabled");

// put back the link in there to trigger the dropdown
var newhtml = jQ('<a href="#"></a>').append(dt.html());
dt.html(newhtml);