Styling arrow in Select Box - css

Question

I'm creating a dropdown menu box and arrow. It looks good except one thing. I used :focus so when user is on select the box, it will turn to green. Yes, box is turning to green but when I do the same thing for arrow icon, it is not changing. Can someone help me with this?
All help will be appreciated.
I have searched some solution on the internet but could not fix the problem.
input[type=text],
input[type=tel],
input[type=email] {
width: 100%;
padding: 5px 5px;
height: 40px;
box-sizing: border-box;
border: 2px solid #A9A9A9;
}
/* user input and dropdown turning to green color when active */
input[type=text]:focus,
input[type=tel]:focus,
input[type=email]:focus,
select:focus,
textarea:focus {
width: 100%;
padding: 5px 5px;
height: 40px;
box-sizing: border-box;
border: 2px solid #42AC82;
}
/* dropdown box styling */
select {
width: 100%;
padding: 5px 5px;
height: 40px;
box-sizing: border-box;
border: 2px solid #A9A9A9;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
select::-ms-expand {
display: none;
}
.select-container {
position: relative;
}
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
.select-arrow {
color: #A9A9A9;
right: 0px;
top: 7px;
width: 30px;
position: absolute;
display: block;
z-index: 10;
margin: 0 0 0 0;
pointer-events: none;
}
select:required:invalid {
color: gray;
}
select[value=""][disabled] {
display: none;
}
<div class='grid'>
<div class='col col-1-of-4'>Is desicion maker?<br>
<div class="select-container">
<span class="select-arrow fa fa-caret-down" style="font-
size: 1.5em;"></span>
<select name="options" required>
<option value="" disabled selected>Select an option
</option>
<option value="1">yes</option>
<option value="2">no</option>
</select>
</div>
</div>
</div

Answer 1

The reason why you're not seeing the arrow color change is that the arrow icon is not a children or next sibling of select element and there's no CSS selector for previous/ parent element. The way I see it you have two options there:
1) Move you arrow icon after select:
<select name="options" required>
<option value="" disabled selected>Select an
option</option>
<option value="1">yes</option>
<option value="2">no</option>
</select>
<span class="select-arrow fa fa-caret-down" style="font-
size: 1.5em;"></span>
Which should you allow to use + (next sibling) selector
select:focus + .select arrow { color: #42AC82 }
2) Use JS to detect select element focus and toggle class select-container element what would allow you to style all child elements as you need

Answer 2

Try add some of your css like this part:
input[type=text]:focus ~ span ,
input[type=tel]:focus ~ span ,
input[type=email]:focus ~ span ,
select:focus ~ span ,
textarea:focus ~ span {
color: red;
}
And transfer your span with icon after select tag like this:
<select name="options" required>
<option value="" disabled selected>Select an option</option>
<option value="1">yes</option>
<option value="2">no</option>
</select>
<span class="select-arrow fa fa-caret-down" style="font-size: 1.5em;">
</span>