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

Css Problem Overview

I would like to modify the way that the list of the different options of my datalist are displayed. Is it possible to apply on it some CSS properties ?

<input list="languages" id="language_id">
<datalist id="languages">
      <option value="html">HTML</option>
      <option value="java">Java</option>
      <option value="perl">Perl</option>
      <option value="php">PHP</option>
      <option value="ruby-on-rails">Ruby on Rails</option>
</datalist>

I tried

option {
    background: red;
}

but it does not seem to work.

Css Solutions

Solution 1 - Css

Like select elements, the datalist element has very little flexibility in styling. You cannot style any of the suggested terms if that's what your question was asking.

Browsers define their own styles for these elements.

Solution 2 - Css

EDIT:
After looking at few other libraries, I found out react-datalist-input provides the easiest way to interact with datalists in react, style and functionality alike.

You can access styles via

.datalist-input

A simple code snippet below:

const DataListWrapper = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 6px;

    .datalist-input {
        width: 50%;
        color: black;
    }
`;

const SomeComponent = () => {
    return (
        <DataListWrapper>
            <ReactDataList
                forcePoly
                placeholder="Search Something..."
                list="my_list"
                options={options}
                onOptionSelected={(e) => foo(e)}
            />
        </DataListWrapper>
    );
};

Old answer:
(note: react-datalist is not being maintained and some of its dependencies are deprecated)

When working with react, you can style the options and the datalist itself using

react-datalist

https://www.npmjs.com/package/react-datalist

You can access these using CSS or styled-components

.react-datalist  
.react-datalist-option

Here is a simple code snippet using styled-components:

    const DataListWrapper = styled.div`
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 6px;
    
          .datalist-input {
              width: 50%;
              color: black;
          }
    `;
    
    const SomeComponent = () => {
        return (
            <>
                <DataListWrapper>
                    <DataListInput
                        placeholder="Search Something..."
                        items={items}
                        onSelect={DoSomething}
                    />
                </DataListWrapper>
            </>
        );
    };

Solution 3 - Css

You can create an alternative Datalist with Jquery

$(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>

Solution 4 - Css

try:

input[list]
{
  background: red;
}

Content Type	Original Author	Original Content on Stackoverflow
Question	n0n0bstan	View Question on Stackoverflow
Solution 1 - Css	Adrift	View Answer on Stackoverflow
Solution 2 - Css	MrBens	View Answer on Stackoverflow
Solution 3 - Css	Dery Reis	View Answer on Stackoverflow
Solution 4 - Css	jarrodean	View Answer on Stackoverflow