When you select an option, the option's background turns blue until you click somewhere else.. I've tried to set the background color for focus and selected, but that didn't work. The background of options should be greyish at all times.
How to remove the blue background on focus?
<style>
#row_demo {
width: 15%;
height: auto;
margin:0 auto;
}
#column
{
height: auto;
overflow: hidden
}
select
{
padding: 1px 3px;
background: rgba(0, 0, 0, 0.83);
border-radius: 10px;
border:1px solid rgba(150, 141, 124, 1);
box-sizing: border-box;
-webkit-box-sizing: border-box;
outline: 0;
color: #D4C7AB;
font-family: ABeeZee;
text-align: center;
}
select:focus
{
box-shadow: 0 0 7px rgba(246, 206, 120, 1);
}
select::-webkit-scrollbar {display:none;}
select::-moz-scrollbar {display:none;}
select::-o-scrollbar {display:none;}
select::-google-ms-scrollbar {display:none;}
select::-khtml-scrollbar {display:none;}
</style>
<div id="column">
<div id="row_demo">
<select id="culture" name="culture" width="277" style="width: 100%;" size="9">
<option value='0' disabled style="text-align:center;">Select location</option>
<option value='1' selected>North</option>
<option value='2'>North-East</option>
<option value='3'>East</option>
<option value='4'>East-South</option>
<option value='5'>South</option>
<option value='6'>South-West</option>
<option value='7'>West</option>
<option value='8'>West-North</option>
</select>
</div>
</div>