html native combobox, show dropdown arrow

Question

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
  <input list="browsers" name="browser" placeholder="choose browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>
</body>
</html>

Using the code above. The dropdown arrow only shows when the user hovers on the input How do I set the input element to always show the icon of the dropdown?

Possible duplicate of [How to make Datalist arrow to be always visible](http://stackoverflow.com/questions/35196782/how-to-make-datalist-arrow-to-be-always-visible) — Pbk1303, Apr 06 '16 at 02:47

claudios · Accepted Answer · 2020-01-24T06:09:21.360

0

Try this small css style then reload your page.

input::-webkit-calendar-picker-indicator {
  opacity: 100;
}

For it to work in Firefox, you might need to add a custom arrow image like this https://stackoverflow.com/a/39555400/3770235

edited Jan 24 '20 at 06:09

answered Apr 06 '16 at 02:37

claudios

6,588
8
47
90

@errieman, yes, the **input::-webkit-calendar-picker-indicator** won't work in Mozilla but you can just add your custom arrow . – claudios Jan 24 '20 at 06:11

html native combobox, show dropdown arrow

1 Answers1