Как изменить цвет наведения списка даталистов в HTML5? - PullRequest
Новая
       47

Как изменить цвет наведения списка даталистов в HTML5?

0 голосов
/ 13 июля 2020

Я изо всех сил старался найти стили для даталиста раскраски при наведении курсора. Пока не могу найти решение. Пожалуйста, если кто знает, ответьте мне. 

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

1 Ответ

0 голосов
/ 13 июля 2020

W3Schools всегда имеет отличные ресурсы, вы не предоставили никакого кода о том, как вы пытаетесь реализовать раскраску при наведении, но проще всего сделать это с помощью CSS. 

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

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

Что касается раскраски списка данных при наведении курсора, вы можете реализовать его с помощью тегов классов. 

<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>
...