Styling away .ui-resizable-handle presets

Styling away .ui-resizable-handle presets


Working with "resizable", I was finding that the handle divs placed
inside of an resizable element seemed to be resistant to having the
background styled:
http://weston.canncentral.org/web_lab/jQueryResizable/ResizableHandleStyleTrouble.html
The resizable is bordered in blue, and I styled the handles with a
yellow border. I also tried to style the background-color of the
handles... and found they were remaining rgb(242,242,242).
Then I poked at the information for the handles in Firebug, and saw
there's a bunch of style information directly in the style attribute
for the handles ("border-right: 1px solid rgb(222, 222, 222);
background: rgb(242, 242, 242) none repeat scroll 0% 0%; overflow:
hidden; right: 0pt; height: 100%; position: absolute; cursor: e-
resize; width: 4px; top: 0px; bottom: 0px; -moz-background-clip: -moz-
initial; -moz-background-origin: -moz-initial; -moz-background-inline-
policy: -moz-initial; font-size: 0.1px; -moz-user-select: none;"). And
that pretty much explained it -- the element-local style information
is going to override anything properties I set on CSS selectors in a
linked stylesheet or document-local style tag.
Obviously I can still style the handles in question by using $('.ui-
resizable-handle').css('background','whatever'). I'm wondering,
however, if there's any way to leave that information in a stylesheet
and have jQuery pull it in dynamically...