How to change the hover color of datalist in HTML5?

I tried my maximum to findout the styles for hover coloring datalist. I can't find out the solution yet. Please if anyone know, reply me.

<div class="form-group">
<label for="productname">Product</label>
<input type="text" autocomplete="off" class="form-control custom-select productdtlst" id="productdtlst_1" name="productdtlst[]" list="productlist_1" tabindex="4" pname="" pcode="" mqty="" stock="" ptype="" ptypeoption="" ctype="" pid="">
<datalist id="productlist_1" class="hovercoloring">
<option pname="Lithium Polymer " pcode="LPBAT01" mqty="1" stock="500" ptype="fixed" ptypeoption="null" ctype="configurable" pid="5ef39a5424811227b09e403a" value="Lithium Polymer "></option>
<option pname="LGSD Cooker" pcode="LGSDC01" mqty="1" stock="500" ptype="fixed" ptypeoption="null" ctype="configurable" pid="5ef39c0faf7d2b0e8cb1b3fc" value="LGSD Cooker"></option>
<option pname="Shampoo" pcode="SHA123" mqty="1" stock="500" ptype="fixed" ptypeoption="null" ctype="configurable" pid="5f0c3cd569ab4d16807d217a" value="Shampoo"></option>
</datalist>
</div>

Solution

W3Schools always has a great resources, you didn't provide any code on how you are trying to implement hover coloring but the easiest way to do it is with CSS.

.hovercoloring:hover {
  background-color: yellow;
}

https://www.w3schools.com/cssref/sel_hover.asp

As for hover coloring a datalist you could implement it via class tags.

<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">

<datalist id="browsers" class="hovercoloring">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>