Стайлинг выберите вариант стрелки

Question

Есть ли какие-либо способы, чтобы получить стрелки в Firefox, как это:

На данный момент он выглядит следующим образом:

HTML:

<select id="state" name="user_state"> 
       <option value="new_york">New York</option> 
       <option value="california">California</option> 
       <option value="florida">Florida</option> 
       <option value="texas">Texas</option> 
       <option value="hawaii">Hawaii</option> 
       <option value="washington">Washington</option> 
</select> 

Answer 1

Возможно, вы можете использовать link к подобному вопросу. Его решение состояло в том, чтобы скрыть существующую стрелу и вставить ее.

Answer 2

.selectWrapper { 
 
    width: 100%; 
 
    overflow: hidden; 
 
    position: relative; 
 
    border: 1px solid #bbb; 
 
    border-radius: 2px; 
 
    background:#FFFFFF url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211%22%20height%3D%2211%22%20viewBox%3D%220%200%2011%2011%22%3E%3Cpath%20d%3D%22M4.33%208.5L0%201L8.66%201z%22%20fill%3D%22%2300AEA9%22%2F%3E%3C%2Fsvg%3E') right 13px center no-repeat; 
 
} 
 

 
.selectWrapper select { 
 
    padding: 12px 40px 12px 20px; 
 
    font-size: 18px; 
 
    line-height: 18px; 
 
    width: 100%; 
 
    border: none; 
 
    box-shadow: none; 
 
    background: transparent; 
 
    background-image: none; 
 
    -webkit-appearance: none; 
 
    outline: none; 
 
    cursor: pointer; 
 
    -moz-appearance: none; 
 
    text-indent: 0.01px; 
 
    text-overflow: ellipsis; 
 
}

<br><br><br>Pure css solution: <br><br><br> 
 

 
<div class="selectWrapper"> 
 
    <select> 
 
     <option>Lorem</option> 
 
     <option>Parturient</option> 
 
     <option>Euismod</option> 
 
    </select> 
 
</div>

Answer 3

Я думаю, что это продемонстрирует то, что вы хотите. Link

Answer 4

<label class="select"> 
    <select name="email" id="email"> 
     <option>x</option> 
     <option>y</option> 
     <option>z</option> 
     <option>a</option> 
     <option>b</option> 
     <option>c</option> 
    </select> 
</label> 

.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: transparent; 
    z-index: 1; 
    text-align: center; 
    width: 10%; 
    height: 100%;  
    pointer-events: none; 
    box-sizing: border-box; 
} 

Посмотрите на codepan в Mozilla