on change css selector for select element - html

Question

I have created a select box with custom css but the problem is that i want to make the custom arrow to downwards once you select it, so right now if i select any option the arrow will be upward, after selection if i click outside only it comes to default downward position.
Since i am using focus this issue comes, what is the better selector so that user clicks on select box it will be upward and once he selects it comes to normal downwards
see the sample snippet
.select {
width: 40%;
height: 50px;
border: 0;
border-left: 1px solid rgba(112, 112, 112, 0.1);
background: transparent;
border-radius: 0;
appearance: none;
-webkit-appearance: none;
padding-left: 15px;
color: green;
background-color: #32a8a6;
border-radius: 2px;
background-position: calc(100% - 20px) calc(1em + 7px),
calc(100% - 15px) calc(1em + 7px), calc(100% - 2.5em) 0.5em;
background-size: 5px 5px, 5px 5px, 1px 1.5em;
background-repeat: no-repeat;
background-image: linear-gradient(45deg, transparent 50%, gray 50%),
linear-gradient(135deg, gray 50%, transparent 50%);
font-family: ProximaNova, Arial, Helvetica Neue, sans-serif;
}
.select:focus {
background-image: linear-gradient(45deg, grey 50%, transparent 50%),
linear-gradient(135deg, transparent 50%, grey 50%);
background-position: calc(100% - 15px) 23px, calc(100% - 20px) 23px,
calc(100% - 2.5em) 0.5em;
background-size: 5px 5px, 5px 5px, 1px 1.5em;
background-repeat: no-repeat;
outline: 0;
}
.select:-moz-focus {
color: transparent;
text-shadow: 0 0 0 #000;
}
<select class='select'>
<option>one</option>
<option>two</option>
</select>

Answer 1

You can use the :active pseudo class instead.
Since it can be hard to see the arrow direction in the example below when the options are showing, I've changed the background color instead to demonstrate the effect.
.select {
width: 40%;
height: 50px;
border: 0;
border-left: 1px solid rgba(112, 112, 112, 0.1);
background: transparent;
border-radius: 0;
appearance: none;
-webkit-appearance: none;
padding-left: 15px;
color: green;
background-color: #32a8a6;
border-radius: 2px;
background-position: calc(100% - 20px) calc(1em + 7px),
calc(100% - 15px) calc(1em + 7px), calc(100% - 2.5em) 0.5em;
background-size: 5px 5px, 5px 5px, 1px 1.5em;
background-repeat: no-repeat;
background-image: linear-gradient(45deg, transparent 50%, gray 50%),
linear-gradient(135deg, gray 50%, transparent 50%);
font-family: ProximaNova, Arial, Helvetica Neue, sans-serif;
}
.select:active {
background-color: red;
}
<select class='select'>
<option>one</option>
<option>two</option>
</select>

Answer 2

Try replacing .select:focus with .select:focus:active
.select {
width: 40%;
height: 50px;
border: 0;
border-left: 1px solid rgba(112, 112, 112, 0.1);
background: transparent;
border-radius: 0;
appearance: none;
-webkit-appearance: none;
padding-left: 15px;
color: green;
background-color: #32a8a6;
border-radius: 2px;
background-position: calc(100% - 20px) calc(1em + 7px),
calc(100% - 15px) calc(1em + 7px), calc(100% - 2.5em) 0.5em;
background-size: 5px 5px, 5px 5px, 1px 1.5em;
background-repeat: no-repeat;
background-image: linear-gradient(45deg, transparent 50%, gray 50%),
linear-gradient(135deg, gray 50%, transparent 50%);
font-family: ProximaNova, Arial, Helvetica Neue, sans-serif;
}
.select:focus:active {
background-image: linear-gradient(45deg, grey 50%, transparent 50%),
linear-gradient(135deg, transparent 50%, grey 50%);
background-position: calc(100% - 15px) 23px, calc(100% - 20px) 23px,
calc(100% - 2.5em) 0.5em;
background-size: 5px 5px, 5px 5px, 1px 1.5em;
background-repeat: no-repeat;
outline: 0;
}
.select:-moz-focus {
color: transparent;
text-shadow: 0 0 0 #000;
}
<select class='select'>
<option>one</option>
<option>two</option>
</select>