How to position a select element and an icon properly with css? - html

Question

I have created a select element within a div with some options to change the language of the page.
The problem is, that the icon which is positioned absolute doesnt react to clicks.
HTML:
<div class="modal-select">
<select v-model="activeLanguage">
<option v-for="(translation, key) in translations" :value="key">
{{ translation.title }}
</option>
</select>
<i class="fa fa-chevron-down"></i>
</div>
SCSS:
.modal-select {
position: relative;
select {
background: #F8F8F8;
padding: 0 5px;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
border: none;
outline: none;
}
i {
position: absolute;
right: 5%;
top: 25%;
cursor: pointer;
color: #3097D1;
}
}
How could I solve this problem?

Answer 1

I don't know what you mean exactly.
Here a few things that could help.
Check the z-index css property. May be your select area is overlapping the icon.
If you want to click on the icon and open the select, you have to link it with js.
If you don't want any hover or animation in your icon, you can put the icon over the select area and give it pointer-events: none;
For example:
.modal-select {
position: relative;
width: 100px;
}
.modal-select select {
background: #F8F8F8;
padding: 0 5px;
width: 100px;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
border: none;
outline: none;
}
.modal-select i {
position: absolute;
right: 5%;
top: 25%;
cursor: pointer;
color: #3097D1;
pointer-events: none;
}
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
<div class="modal-select">
<select>
<option value="">option 1</option>
<option value="">option 2</option>
<option value="">option 3</option>
</select>
<i class="fa fa-chevron-down"></i>
</div>