title: Detect focus on select box to change class/style in surrounding DIV
body: <p>I have an issue where I need to surround a select box with a div. That select box is transparent and therefore the styles, including focus styles, need to occur on the surrounding div. I have been playing with the idea of detecting if the select box is focused and if so add a class. But nothing seems to work... I have also used scripts with .is :focus which work well in most browsers but not in IE and specifically IE8, which unfortunately I have to support. Can anyone help?</p>
  
  <pre><code> &lt;div class="styled-select"&gt;
  &lt;select id="Title" name="Title" required autofocus="autofocus"&gt;
       &lt;option value="" selected=yes&gt; Title &lt;/option&gt;
       &lt;option value="Ms" &gt; Ms &lt;/option&gt;
      &lt;option value="Mrs" &gt; Mrs &lt;/option&gt;
   &lt;/select&gt;
  &lt;/div&gt;    
  
  var select = $('select:focus');    
  
  $(select).each(function(){
        $('.styled-select').addClass('focus');
    });
  </code></pre>