Delete 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 a little black down arrow in the right corner

Is there any way to remove or hide this?

Jsfiddle

UPDATE:

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

But for this I need a different solution, is there any other way?

Answer 1

The following will work:

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

jsFiddle here