Триггер select dropdown on pseudoelement

Question

Есть ли способ вызвать раскрывающийся список (выбрать параметры) при нажатии: after (стрелка)? Может быть, мой код может быть лучше для этого дизайна, но это единственное решение, которое я, наконец, придумал, что работает нормально.

HTML

<label> 
    <select> 
     <option selected>jkjhhkl</option> 
     <option>asdfasd</option> 
     <option>dfgdfgfd</option> 
    </select> 
</label> 

CSS

select { 
    height: 40px; 
    background-color: #666; 
    color: #f6f6f6; 
    font: 400 13px "Open Sans",Arial,"Helvetica Neue",Helvetica,sans-serif; 
    padding: 6px 20px; 
    overflow: hidden; 
    border: 0; 
    outline: none; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
} 

label { 
    position: relative; 
    height: 40px; 
} 

label:after { 
    content: '\f107'; 
    font: 22px "FontAwesome"; 
    color: #f6f6f6; 
    background-color: #333; 
    padding: 10px 10px; 
} 

https://jsfiddle.net/sworj0ta/1/

Answer 1

Я думаю, это то, что вы ищете: https://jsfiddle.net/2232xzy8/1/

я расположил поле выбора над label и label:before и перемещать только цвет фона до label элемент при сохранении select фон прозрачный.

Поэтому похоже, что вы нажимаете на стрелку, но на самом деле вы нажимаете на поле выбора.

Answer 2

Вот код:

HTML:

<div class="styled-select"> 
<select> 
    <option>Here is the first option</option> 
    <option>The second option</option> 
</select> 
</div> 

CSS:

.styled-select select { 
background: transparent; 
width: 268px; 
padding: 5px; 
font-size: 16px; 
line-height: 1; 
border: 0; 
border-radius: 0; 
height: 34px; 
-webkit-appearance: none; 
} 


.styled-select { 
    width: 240px; 
    height: 34px; 
    overflow: hidden; 
    background: url(http://bavotasan.com/wp-content/uploads/2011/05/down_arrow_select.jpg) no-repeat right #ddd; 
    border: 1px solid #ccc; 
}