title: Dropdown caret on styled select box disappears on focus
body: <p>I've learned that the best way to style a select box is to wrap it in a styled div, so I've done that; my div has a class of select-style. I want the background color of the select box to change on focus, but I can't for the life of me figure out how to get the dropdown caret (which is a background image) to remain.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>&lt;!doctype html&gt;
   &lt;html&gt;
       &lt;head&gt;
          &lt;title&gt;Select Box Styling&lt;/title&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;style type="text/css"&gt;
              body {
                  background-color: #FFF;
                  font-family: Helvetica, Arial, sans-serif;
                  padding: 30px;
                  margin: 0;
              }
  
              .select-style {
                 width: 240px;
                 height: 34px;
                 overflow: hidden;
                 background: transparent url('dropdown-arrow4.gif') no-repeat right;
                 border: 1px solid #8DC63F;
                 border-radius: 4px;
              }
  
              .select-style select {
                  background-color: transparent;
                  width: 268px;
                  padding: 5px;
                  font-size: 14px;
                  line-height: 1;
                  border: 0;
                  border-radius: 0;
                  height: 34px;
                  -webkit-appearance: none;
                  font-family: Helvetica, Arial, sans-serif;
                  color: #222;
              }
  
              .select-style select:focus,
              .select-style select:active {
                  outline: none;
                  background-color: #ECF7CB;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="select-style"&gt;
              &lt;select&gt;
                 &lt;option&gt;The first option&lt;/option&gt;
                 &lt;option&gt;The second option&lt;/option&gt;
                 &lt;option&gt;The third option&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
      &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>Any help would be greatly appreciated!</p>