title: Customized select dropdown arrow not clickable
body: <p>I'm using the following code to customize my select dropdown arrow:</p>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;span class="selectWrapper"&gt;
      &lt;select id="rowselect" class="pageinfoselect input-mini"&gt;
          &lt;option&gt;...&lt;/option&gt;
      &lt;/select&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p><strong>CSS</strong>:</p>
  
  <pre><code>span.selectWrapper {
      position: relative;
      display: inline-block;
            width:65px;
  }
  
  span.selectWrapper select {
      display: inline-block;
      padding: 4px 3px 3px 5px;
      margin: 0;
      font: inherit;
      outline:none; /* remove focus ring from Webkit */
      line-height: 1.2;
      background: #f5f5f5;
      height:30px;
      color:#666666;
      border:1px solid #dddddd;
  }
  
  
  
  
  /* Select arrow styling */
  span.selectWrapper:after {
      content: url("../images/arrow_down.png");
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      line-height: 30px;
      padding: 0 7px;
      background: #f5f5f5;
      color: white;
      border:1px solid #dddddd;
      border-left:0px;
  }
  </code></pre>
  
  <p>This works fine and replaces the default dropdown arrow but the problem is that the arrow image is not clickable. If I click on the select box it opens but I want it to open when I click the arrow image as well</p>