Struggling to eliminate the blue border and blue background on hover from a select tag option. Despite searching for solutions, none seem to work as desired. Some codes helped change the background, but not what I intended to achieve. Any guidance would be greatly appreciated. Thank you in advance. Explore the Sample Code Fiddle Here
CSS:
.form-control:disabled, .form-control[readonly]
{
background-color: #ffffff !important;
}
select:required:invalid
{
color: #999999;
box-shadow: none;
-moz-appearance:none;
-webkit-appearance: none;
}
option[value=""][disabled]
{
display: none;
}
option
{
color: #404041;
}
select{
-webkit-appearance: none;
}
.form-control:focus
{
box-shadow: none !important;
border-color: #979797 !important;
}
select:focus,button:focus
{
outline: none !important;
}