Home/ Questions/Q 6357043
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T23:05:19+00:00

I’m writing a jQuery UI widget and trying to stick to the built-in styles

  • 0

I’m writing a jQuery UI widget and trying to stick to the built-in styles whenever possible, to allow theme-roller skinning. I have a structure that looks (simplified) roughly like this:

<div class='ui-state-active'>
    <div class='ui-state-default'>
        <div class='ui-icon ui-icon-triangle-1-e'/>
    </div>
</div>

The problem is that ui-icon switches its icon set depending on the ui-state of its ancestors. But ui-state-active on the element further up the hierarchy appears to take precedence over ui-state-default on its immediate parent, resulting in an icon that typically blends in with its background.

I could manually override the background for the ui-icon element, but then the widget is no longer themeable. Is there another way to prevent ui-state-active from affecting that icon?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The relevant ui css is this,

    .ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_cccccc_256x240.png); }
...
.ui-state-default .ui-icon { background-image: url(images/ui-icons_cccccc_256x240.png); }
...
.ui-state-active .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }

    It doesn’t look like there is anything you can do while keeping themeroller compatibility. Apart from rethinking the layout of your DOM. 

    <div class='ui-state-active'>

</div>
<div class='ui-state-default'>
    <div class='ui-icon ui-icon-triangle-1-e'/>
</div>
    • 0