remove arrow in chrome for input with attribute "list"

css, google-chrome, html, webkit

Solution

The following will work:

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

jsFiddle here

Problem

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?

Original source

Related problems