title: Styling Select element
body: <p>OK, so here's the situation:</p>
  
  <ul>
  <li>I've got a styled <code>&lt;select&gt;</code> element</li>
  <li>On the right part of its (transparent) background, I want to show some up arrow (preferably a Bootstrap Glyphicon)</li>
  </ul>
  
  <p>The issue:</p>
  
  <ul>
  <li>The icon appears fine (in the fiddle it shows up like a square icon, for some reason, but it doesn't matter)</li>
  <li>However when clicking on the icon, the select is not triggered - which is not correct.</li>
  </ul>
  
  <p>Any ideas?</p>
  
  <hr>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="styled-select"&gt;
      &lt;select&gt;
          &lt;option value="one"&gt;One&lt;/option&gt;
          &lt;option value="two"&gt;Two&lt;/option&gt;
          &lt;option value="three"&gt;Three&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>select {
      border:0; 
      border-radius: 0;
      background:transparent; 
      outline:none; 
      box-shadow:none; 
      -webkit-box-shadow:none; 
      text-align:right;
      -webkit-appearance: none;
  
      padding-top: 1px;
      font-size: 13px;
      padding-left: 10px;
  }
  
  #styled-select:hover {
      color: #666;
  }
  
  #styled-select:after {
      content:"\e113";
      font-family:"Glyphicons Halflings";
      line-height:1;
      display:inline-block;
      margin-left:5px;
  }
  </code></pre>
  
  <hr>
  
  <p><strong>Demo/Fiddle:</strong> <a href="http://jsfiddle.net/tnzbL1hp/" rel="nofollow">http://jsfiddle.net/tnzbL1hp/</a></p>