I'm sorry to say, that what you are looking to do is not achievable. Color and background color may not be set on a select option. However, you may set the background-image. The code below demonstrates setting the background image through the use of JQuery (and resetting the background of the un-selected option). It also hides the right side scroll bar through CSS overflow:hidden
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#mySelectList').change(function (){
var $option = $(this).find('option:selected');
$option.css('color','#00000');
$option.css('background-image','linear-gradient(blue, gray)');
var $unoption = $(this).find('option:not(:selected)');
$unoption.css('background-image','none');
});
});
</script>
<style>
select {
width: 100%;
padding: 0;
border: none;
background-image: none;
font-size: 16px;
color: #868686;
overflow: hidden;
}
select option {
display: inline;
float: left;
margin-right: 128px;
}
select option:hover {
cursor: pointer;
}
select option:checked {
font-weight: 600;
}
</style>
<html>
<body>
<select id="mySelectList" multiple="multiple">
<option value="">Latest</option>
<option value="52">New</option>
<option value="53">Pre-Owned</option>
<option value="115">Unworn</option>
</select>
<div id="results">
</div>
</body>
</html>