How do I change the background color of a resizable handle of a JQuery UI Dialog?

Question

You'd think it would be easy, but keep reading. I can change many of the styles associated with a resizable JQuery Dialog, but not the handles. The code below isolates the problem. Why does the handle disappear entirely? There must be some logic I'm interfering with in ui.resizable.js, but I don't see it.

<script type="text/javascript" language="JavaScript" src="jquery126.js"></script>
<script type="text/javascript" language="JavaScript" src="ui/ui.core.js"></script>
<script type="text/javascript" language="JavaScript" src="ui/ui.dialog.js"></script>
<script type="text/javascript" language="JavaScript" src="ui/ui.resizable.js"></script>
<script type="text/javascript" language="JavaScript" src="ui/ui.draggable.js"></script>

<script>
$(document).ready(foo);

function foo()
{
 $("#dlg").dialog()
}
</script>

<style type="text/css">

.ui-resizable-n
{
 background: green;
}

</style>
<div id=dlg title="my title">this is<br>my text</div>

Answer 1

I believe the background of the resizeable borders are set as images, which in CSS stacking is on top of backgrounds. Try setting:

.ui-resizable-n{
  background-image:none;
  background-color:green;
}

Answer 2

I was able to get it to work. I couldn't find the line of code my css was in conflict with, but when I added positioning and size related css, things worked. There must be some logic that says, "use the default css unless the programmer has supplied his own". So, while I thought I was appending info, I was somehow swapping info.