title: Customize a select with font-awesome
body: <p>This is what I have actually:</p>
  
  <h1>HTML</h1>
  
  <pre><code>&lt;label class="select"&gt;
    &lt;select name="email" id="email"&gt;
      &lt;option&gt;aaaa&lt;/option&gt;
      &lt;option&gt;aaaa&lt;/option&gt;
      &lt;option&gt;aaaa&lt;/option&gt;
      &lt;option&gt;aaaa&lt;/option&gt;
      &lt;option&gt;aaaa&lt;/option&gt;
      &lt;option&gt;aaaa&lt;/option&gt;
    &lt;/select&gt;
  &lt;/label&gt;
  </code></pre>
  
  <h1>CSS</h1>
  
  <pre><code>.cforms select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;   
  }
  
  
  .select {
      position:relative;   
      display: -moz-inline-stack;
      display: inline-block;
      vertical-align: middle;
      zoom: 1;
      *display: inline;
      margin-top:40px;
  }
  
  .select:after {
    content: "\f0dc";
    font-family: FontAwesome;
    color: #000;
    padding:8px;
    position:relative;
    right:35px;
    top:0px;
    background:red;
    z-index:-1;
    width:10%;
    line-height:10%;
  }
  </code></pre>
  
  <h1>Problem</h1>
  
  <p>Actually, no arrows appears near my select.</p>
  
  <p>Could you please help me with this.</p>
  
  <p>I searched on the web for examples, but I can't make it works.</p>
  
  <p>Thanks.</p>