Remove Datalist Dropdown Arrow in Chrome

Css Problem Overview

Chrome has apparently added a dropdown arrow to text inputs that reference a <datalist>. It's appearing in Chrome 34 (Canary) but not in the current stable build (Chrome 31).

It appears only when the text field is focused (see update) and is applied to both input types text and search.

It could be worse as far as native browser implementations go, but as you can see in the image, it conflicts with my design specs.

enter image description here

Does anyone know how to remove or replace this new feature?

<datalist id="list"><option value="foo"><option value="bar"></datalist>
<input type="text" list="list" name="field" maxlength="50" autocomplete="off" spellcheck="off" placeholder="Jump To">

Update:

The arrow also appears when the field is hovered (not just focused) and unfortunately also has its own background color when the button itself is hovered:

enter image description here

Css Solutions

Solution 1 - Css

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

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

Solution 2 - Css

As others have mentioned ::-webkit-calendar-picker-indicator { display: none } works at removing the arrow it would also impact the html5 datepicker on a <input type="date">,

To remove just removing the datalist input would be:

[list]::-webkit-calendar-picker-indicator { display: none; }

Solution 3 - Css

Thanks to Cantera. I didn't want to get rid of the black arrow entirely, just the gray square surrounding it.

input::-webkit-calendar-picker-indicator {
  background-color: inherit;
  }

Solution 4 - Css

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

Also removed the arrow for me and I found created a better clicking experience to still click where the arrow would be, you can even increase the the width and height of it > 1em and in the input maybe put a custom arrow as a background image, where the arrow would be.

Solution 5 - Css

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

It's work for me; (use display:0 not work on chorme)

Solution 6 - Css

Set the list option of parent input to be empty, <input list="" ... /> , eg :

<input
  list=""
  name="option"
  id="input"
  autocomplete="off"
>

<datalist id="datalist">
  <option>Carrots</option>
  <option>Peas</option>
  <option>Beans</option>
</datalist>

see mdn customizing_datalist_styles example

Solution 7 - Css

try -webkit-appearance: none that should remove the default styles

Content Type	Original Author	Original Content on Stackoverflow
Question	cantera	View Question on Stackoverflow
Solution 1 - Css	cantera	View Answer on Stackoverflow
Solution 2 - Css	jnowland	View Answer on Stackoverflow
Solution 3 - Css	Toby Belch	View Answer on Stackoverflow
Solution 4 - Css	dmartins	View Answer on Stackoverflow
Solution 5 - Css	meomay	View Answer on Stackoverflow
Solution 6 - Css	Jimmy Obonyo Abor	View Answer on Stackoverflow
Solution 7 - Css	jmore009	View Answer on Stackoverflow