Is there a way to apply a CSS style on HTML5 datalist options?

$(document).on('dblclick', 'input[list]', function(event){
event.preventDefault();
var str = $(this).val();
$('div[list='+$(this).attr('list')+'] span').each(function(k, obj){
if($(this).html().toLowerCase().indexOf(str.toLowerCase()) < 0){
$(this).hide();
}
})
$('div[list='+$(this).attr('list')+']').toggle(100);
$(this).focus();
})


$(document).on('blur', 'input[list]', function(event){
event.preventDefault();
var list = $(this).attr('list');
setTimeout(function(){
$('div[list='+list+']').hide(100);
}, 100);
})


$(document).on('click', 'div[list] span', function(event){
event.preventDefault();
var list = $(this).parent().attr('list');
var item = $(this).html();
$('input[list='+list+']').val(item);
$('div[list='+list+']').hide(100);
})


$(document).on('keyup', 'input[list]', function(event){
event.preventDefault();
var list = $(this).attr('list');
var divList =  $('div[list='+$(this).attr('list')+']');
if(event.which == 27){ // esc
$(divList).hide(200);
$(this).focus();
}
else if(event.which == 13){ // enter
if($('div[list='+list+'] span:visible').length == 1){
var str = $('div[list='+list+'] span:visible').html();
$('input[list='+list+']').val(str);
$('div[list='+list+']').hide(100);
}
}
else if(event.which == 9){ // tab
$('div[list]').hide();
}
else {
$('div[list='+list+']').show(100);
var str  = $(this).val();
$('div[list='+$(this).attr('list')+'] span').each(function(){
if($(this).html().toLowerCase().indexOf(str.toLowerCase()) < 0){
$(this).hide(200);
}
else {
$(this).show(200);
}
})
}
})

* {
scrollbar-width: thin;
scrollbar-color: #BBB #EEE;
}


*::-webkit-scrollbar {
width: 10px;
}


*::-webkit-scrollbar-track {
background: #C0C3C6;
}


*::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 10px;
border: 3px solid #C0C3C6;
}


table {
width: 400px;
margin: 0 auto;
background: #EEE;
font-family: Arial;
padding: 10px 30px;
border-radius: 5px;
box-shadow: 0 5px 5px -5px #000;
--border: 1px solid #ABC;
}
table td {
padding-bottom: 10px;
}
table h4 {
text-align: center;
color: #567;
border: 1px solid #567;
border-radius: 3px;
padding: 15px 0;
}
input {
padding: 10px;
font-size: 1em;
width: calc(100% - 20px);
border: var(--border);
border-radius: 3px;
}
input[list]:focus {
outline: none;
}
input[list] + div[list] {
display: none;
position: absolute;
width: 100%;
max-height: 164px;
overflow-y: auto;
max-width: 330px;
background: #FFF;
border: var(--border);
border-top: none;
border-radius: 0 0 5px 5px;
box-shadow: 0 3px 3px -3px #333;
z-index: 100;
}
input[list] + div[list] span {
display: block;
padding: 7px 5px 7px 20px;
color: #069;
text-decoration: none;
cursor: pointer;
}
input[list] + div[list] span:not(:last-child) {
border-bottom: 1px solid #EEE;
}
input[list] + div[list] span:hover {
background: rgba(100, 120, 140, .2);
}


table .instructions {
font-size: .9em;
color: #900;
}
table .instructions b {
color: #123;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<table width="400">
<tr>
<td> <h4>DATALIST STYLING ALTERNATIVE</h4> </td>
</tr>
<tr>
<td>
<div>Programming languages</div>
<input type="text" name="language" list="list-language">
<div list="list-language">
<span>CSharp</span>
<span>Delphi</span>
<span>Flutter</span>
<span>Java</span>
<span>Java Script</span>
<span>PHP</span>
<span>Python</span>
<span>Ruby</span>
<span>SAP</span>
<span>Visual Basic</span>
</div>
</td>
</tr>
<tr>
<td>
<div>Cities</div>
<input type="text" name="cities" list="list-cities">
<div list="list-cities">
<span>Athens</span>
<span>Beijing</span>
<span>Berlin</span>
<span>Cairo</span>
<span>Lisbon</span>
<span>London</span>
<span>Mexico City</span>
<span>Moscow</span>
<span>New York</span>
<span>Rio de Janeiro</span>
<span>Rome</span>
<span>Tokyo</span>
</div>
</td>
</tr>
<tr>
<td>
<div class='instructions'>
<b>INSTRUCTIONS:</b><hr>
<p><b>Double click on the input:</b><br>Show/hide the datalist.</p>
<p><b>Press esc on the input:</b><br>Hides datalist if visible.</p>
<p><b>Onkeypress in the input:</b><br>Displays the datalist filtering according to the entered string.</p>
<p><b>On pressing enter:</b><br>Ff there is only 1 element in the datalist, this value will be loaded into the input.</p>
</div>
<td>
</tr>
</table>