How to Make Datalist Arrow to Be Always Visible

How to make Datalist arrow to be always visible

I have got the arrow always visible using css:

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

    <input list="browsers" name="myBrowser" />    <datalist id="browsers">      <option value="Chrome">      <option value="Firefox">      <option value="Internet Explorer">      <option value="Opera">      <option value="Safari">    </datalist>

html native combobox, show dropdown arrow

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

Remove Datalist Dropdown Arrow in Chrome

Thanks to the comment by alexander farkas, here is the style rule to remove the arrow:

input::-webkit-calendar-picker-indicator {
  display: none;
}

How to Change the icon which displays on the datalist input in HTML? Hiding is possible , but can i change it to some other icons, Like arrow-down?

The trick is to hide the icon using opacity:0, then you can add your own icon. In this simple I'm using fontawesome calendar icon.

input::-webkit-calendar-picker-indicator {  opacity:0;}
input {  position:relative;  }
input:before {  content: "\f073";  display: inline-block;  font: normal normal normal 14px/1 FontAwesome;  font-size: inherit;  text-rendering: auto;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  position:absolute;  right:0;  top:50%;  transform:translateY(-50%);}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /><input type="date" />

Getting the full list from a HTML Datalist clicking on the arrow

This is the expected behavior and what I asked is not possible. The list supposed to get filter by the user input text.

Possible solutions for this issue can be solved using one of these

http://pebbleroad.github.io/combo-select/

http://jqueryui.com/autocomplete/#combobox

Adding a dropdown arrow inside the input field

Check this, this will add a pseudo element in the div of input tag, for better view change the content of element to font-awesome font of down arrow.

<div class="dropdown">
    <input type="text">
</div>

And use below CSS :

.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown::before {
    position: absolute;
    content: " \2193";
    top: 0px;
    right: -8px;
    height: 20px;
    width: 20px;
}

Check fiddle : Check Fiddle

---

Related Topics