title: How do I change the background color of a resizable handle of a JQuery UI Dialog?
body: <p>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.</p>
  
  <pre><code>&lt;script type="text/javascript" language="JavaScript" src="jquery126.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" language="JavaScript" src="ui/ui.core.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" language="JavaScript" src="ui/ui.dialog.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" language="JavaScript" src="ui/ui.resizable.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" language="JavaScript" src="ui/ui.draggable.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
    $(document).ready(foo);
    function foo() {
      $("#dlg").dialog()
    }
  &lt;/script&gt;
  
  &lt;style type="text/css"&gt;
    .ui-resizable-n {
      background: green;
    }
  &lt;/style&gt;
  &lt;div id=dlg title="my title"&gt;this is&lt;br&gt;my text&lt;/div&gt;
  </code></pre>