<legend> colour when using jQuery UI Theme

Question

I'm using a jQuery UI Theme, which is predominantly white text on a black background. I'm using a <fieldset> with a <legend> and the text of the latter is being display in black on a black background (black being the browser's default font colour).

I've tried applying various jQuery UI Theme CSS classes to the legend (e.g. "ui-widget-content"), but I get too much extra baggage, such as borders and backgrounds, when I just want the text to be white.

Before anyone says "why don't you just make the text white?", I should state that I have switchable themes, so it has to get the colour from the theme's stylesheet.

I know that I can use jQuery to apply the CSS class to all legends, when I know which one I want, thus:

$("legend").addClass("???");

Any help would be greatly appreciated.

Answer 1

I solved the problem by using jQuery to set the <legend> colour to be the same as that of an element with a CSS class of ui-widget-content.

$("legend").css("color", $(".ui-widget-content").css("color"));

Obviously, this depends on there actually being an element with that class present. For my purposes, I know there always will be.