I have customized a dropdown menu.
<select name="country">
<option value="Andorra">Andorra</option>
<option value="Albania">Albania</option>
<option value="Armenia">Armenia</option>
<option value="Austria">Austria</option>
</select>
Using the following CSS styling:
select {
display: none;
}
select {
width: 8em;
font-family: Segoeui;
font-size: 28px;
padding: 5px 5px;
margin: 5px;
display: inline-flex;
font-weight: 300;
outline: none;
position: relative;
background: #ccc;
color: white;
border-radius: 8px;
}
select:hover{
background: #eb4410;
}
select:focus{
background: #eb4410;
}
select option:selected{
background: #eb4410; !important
}
The current functionality is as desired:
Default state:
https://i.sstatic.net/xnQCm.png
Hovered state:
https://i.sstatic.net/frHxt.png
Selected state:
https://i.sstatic.net/FICBI.png
However, an issue arises when clicking elsewhere on the screen, causing the background color to revert back to its original color.
This leads me to two questions:
1) How can I change the default blue hover color of selected options?
2) How do I ensure that the orange background color remains after selecting an item and then clicking off the dropdown box?
I am seeking a solution using only CSS. Thank you for your help!