remove arrow in chrome for input with attribute "list"

Question

I have this code:

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Google Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

In Chrome I get the little black down arrow in right corner

Is there any way to remove or hide that?

JSFiddle

UPDATE:

I know that I can wrap it, and then close it with psuedo-element as show in this JSFiddle

But I need another solution for that, is there any other way?

Answer 1

The following will work:

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

jsFiddle here

Answer 2

I was struggling with this today. In Chrome 97 i needed to add an important tag to make it work

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

http://jsfiddle.net/pg0et59w/3/