i have `select option list` in my side panel and i just want to change select background color if the user selected any option. I don't want to change option colors. Simply i want to make as if user select any `option`, apply `mouse hover color` to background.

[![enter image description here](https://i.stack.imgur.com/P7glZ.jpg)](https://i.stack.imgur.com/P7glZ.jpg) to [![enter image description here](https://i.stack.imgur.com/YEF1A.jpg)](https://i.stack.imgur.com/YEF1A.jpg)

```css
.nav-country-select:hover {
  border: 1px solid #999;
  background-color: #ced0cf;
}
.nav-country-select:focus {
  outline: none !important;
}
.nav-country-select {
  background-color: #e9ece5;
  font-family: Arial, Times, serif;
  color: #333333;
  height: 35px;
  border: 1px solid #bbbcbc;
}
```

```html
<li>
  <label class="label nav-label">Country</label>
  <select class="btn nav-country-select" id="countrySelect" autocomplete="off">
    <option value="1" selected>Doesn't Matter</option>
    <option value="3">Australia</option>
    <option value="4">New Zealand</option>
    <option value="5">Middle East</option>
    <option value="6">UK</option>
    <option value="7">USA</option>
    <option value="8">Canada</option>
    <option value="9">India</option>
    <option value="10">Other</option>
  </select>
</li>
```