HTML, CSS, Dropdown Arrow, Select

Question

Я создал скрипку здесь, где показаны стрелки выбора и выпадающего списка.

Моя проблема заключается в том, что стрелка создается с помощью CSS и позиционируется поверх выбора. однако щелчок на стрелке не раскрывает выпадающего списка.

1. есть способ использовать этот css в качестве фона для выделения, как мы делаем, когда используем стрелку изображения.
2. или можно ли моделировать поведение при нажатии стрелки?

.selectClass { 
 
    -webkit-appearance: none; 
 
    -webkit-border-radius: 0; 
 
    -moz-appearance: none; 
 
    border: none; 
 
    width: 100px; 
 
    background: #EEE; 
 
    height: 30px; 
 
    font-size: 20px; 
 
    padding-left: 5px; 
 
} 
 
.dropDownArrow { 
 
    position: relative; 
 
    margin-left: 75px; 
 
    margin-top: -20px; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 10px solid transparent; 
 
    border-right: 10px solid transparent; 
 
    border-top: 10px solid #555; 
 
}

<select class="selectClass"> 
 
    <option>One</option> 
 
    <option>Two</option> 
 
    <option>Three</option> 
 
</select> 
 
<div class="dropDownArrow"></div>

Answer 1

До сих пор самое простое решение в данном случае будет игнорировать щелчки мышью на стрелке, и пусть клики «проходят», используя pointer-events: none;. Это необходимо только изменить ваш код, увидеть его здесь:

.selectClass { 
 
    -webkit-appearance: none; 
 
    -webkit-border-radius: 0; 
 
    -moz-appearance: none; 
 
    border: none; 
 
    width: 100px; 
 
    background: #EEE; 
 
    height: 30px; 
 
    font-size: 20px; 
 
    padding-left: 5px; 
 
} 
 
.dropDownArrow { 
 
    pointer-events: none; 
 
    position: relative; 
 
    margin-left: 75px; 
 
    margin-top: -20px; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 10px solid transparent; 
 
    border-right: 10px solid transparent; 
 
    border-top: 10px solid #555; 
 
}

<select class="selectClass"> 
 
    <option>One</option> 
 
    <option>Two</option> 
 
    <option>Three</option> 
 
</select> 
 
<div class="dropDownArrow"></div>

Answer 2

Я хотел бы создать родительский DIV вокруг обоих элементов с цветом фона, переместите стрелку раскрывающегося списка за выбора заголовка, убедитесь, что фон заголовка прозрачным. Таким образом, вы видите стрелку, но, только нажав на выбор элемента поле вверху:

.dropDownArrow { 
 
    position: absolute; 
 
    left: 75px; 
 
    top: 10px; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 10px solid transparent; 
 
    border-right: 10px solid transparent; 
 
    border-top: 10px solid #555; 
 
} 
 
.selectClass { 
 
    -webkit-appearance: none; 
 
    -webkit-border-radius: 0; 
 
    -moz-appearance: none; 
 
    border: none; 
 
    width: 100px; 
 
    background: transparent; 
 
    height: 30px; 
 
    font-size: 20px; 
 
    padding-left: 5px; 
 
    position: absolute; 
 
} 
 
.dropdownWrapper { 
 
    position:absolute; 
 
    width: 100px; 
 
    height: 30px; 
 
    background: #ddd; 
 
}

<div class="dropdownWrapper"> 
 
    <div class="dropDownArrow"></div> 
 
    <select class="selectClass"> 
 
     <option>One</option> 
 
     <option>Two</option> 
 
     <option>Three</option> 
 
    </select> 
 
</div>