Search code examples
htmlcssgoogle-chromewebkit

remove arrow in chrome for input with attribute "list"

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

field with arrow

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?

Solution

  • The following will work:

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

    jsFiddle here