I have customized a select box using CSS, but I am facing an issue where the custom arrow remains upward even after selecting an option. I want the arrow to point downwards once an option is chosen and revert to the default position when clicked outside.
The problem seems to be related to the focus state. Can anyone suggest a better selector so that the arrow points upwards when the user clicks on the select box and downwards after making a selection?
Here is a 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>