Personalizzare un select con font-awesome

Question

Questo è quello che ho fatto:

HTML

<label class="select"> 
    <select name="email" id="email"> 
    <option>aaaa</option> 
    <option>aaaa</option> 
    <option>aaaa</option> 
    <option>aaaa</option> 
    <option>aaaa</option> 
    <option>aaaa</option> 
    </select> 
</label> 

CSS

.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%; 
} 

Problema

In realtà, nessuna freccia appare vicino alla mia select .

la prego di aiutarmi con questo.

Ho cercato sul web per gli esempi, ma non riesco a fare funziona.

Grazie.

Answer 1

forse in modo

.select { 
 
    border: 1px solid #ccc; 
 
    overflow: hidden; 
 
    height: 40px;  
 
    width: 240px; 
 
    position: relative; 
 
    display: block; 
 
} 
 

 
select{  
 
    height: 40px; 
 
    padding: 5px; 
 
    border: 0; 
 
    font-size: 16px;  
 
    width: 240px; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    appearance: none; 
 
} 
 
.select:after { 
 
    content:"\f0dc"; 
 
    font-family: FontAwesome; 
 
    color: #000; 
 
    padding: 12px 8px; 
 
    position: absolute; right: 0; top: 0; 
 
    background: red; 
 
    z-index: 1; 
 
    text-align: center; 
 
    width: 10%; 
 
    height: 100%;  
 
    pointer-events: none; 
 
    box-sizing: border-box; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<label class="select"> 
 
    <select name="email" id="email"> 
 
     <option>aaaa1</option> 
 
     <option>aaaa2</option> 
 
     <option>aaaa3</option> 
 
     <option>aaaa4</option> 
 
     <option>aaaa5</option> 
 
     <option>aaaa6</option> 
 
    </select> 
 
</label>