I've been working on a dropdown menu box and an arrow, and for the most part it's looking good. However, I've run into an issue with the arrow icon not changing color when the user is focused on it. I'm using the :focus pseudo-class to turn the box green when selected, but the arrow isn't following suit. Can anyone provide some guidance on how to address this? Any help would be greatly appreciated.
I've tried searching for a solution online, but I haven't been able to 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 decision 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