Remove Datalist Dropdown Arrow in Chrome

Question

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

I haven't looked, but this should be simple. Go into the dev console enable shadowdom and inspect the input element's shadow dom. Then you will see the arrow element including his pseudoclass it's propable a pseudoelement something like 'input::-webkit-list-arrow'. — alexander farkas, Jan 06 '14 at 00:24

cantera · Accepted Answer · 2022-01-01T00:43:01.703

135

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

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

edited Jan 01 '22 at 00:43

answered Jan 06 '14 at 01:28

cantera

24,479
25
95
138

4

holy balls thank you so much for this. driving me crazy – Jason May 25 '14 at 19:25
1

I used this in combination with the :hover and :focus selectors to only show it when my users clicked in the input. Made it a little more obvious that it was optional with free text, and not a dropdown only control. – Des Horsley Sep 24 '14 at 01:12
8

Warning this also impacts the html5 date input type. `[list]::-webkit-calendar-picker-indicator` removes only datalists. – jnowland Mar 05 '19 at 07:05
6

For IOS the selector is `::-webkit-list-button` – Blake Plumb Mar 29 '19 at 22:08
17

will not work in Chrome 91 and above without `!important` rule – mustofa.id Sep 14 '21 at 13:06
2

finally adding !importantis working now ( chrome Version 97 ) – Flint Feb 04 '22 at 06:40
Thank you @mustofa.id, without !important, it doesn't work. – Vivek S Jul 27 '22 at 11:13

score 27 · Answer 2 · answered Mar 05 '19 at 07:03

27

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; }

answered Mar 05 '19 at 07:03

jnowland

2,064
19
15

This should be the highest rated answer since it has the highest level of specificity, making it more robust for future form changes. – stwr667 Oct 12 '20 at 06:13
1

It should probably be noted that this is a Chrome-specific solution to a Chrome-specific problem, c.f: https://stackoverflow.com/questions/13693482/is-there-a-way-to-apply-a-css-style-on-html5-datalist-options – stwr667 Oct 12 '20 at 06:16
Can anyone suggest me a way to set this property using javascript(typescript to be more specific) – Arbaz Sheikh Nov 12 '20 at 05:53
7

Doesn't seem to work in 2021. – isherwood Oct 20 '21 at 16:27

score 9 · Answer 3 · answered Dec 09 '16 at 22:17

9

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;
  }

answered Dec 09 '16 at 22:17

Toby Belch

101
1
6

2

Why not `background-color: transparent`? – Denilson Sá Maia Jul 04 '17 at 20:19

score 8 · Answer 4 · answered Sep 09 '17 at 03:40

8

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.

answered Sep 09 '17 at 03:40

dmartins

261
2
2

1

Your solution is the one that worked for me, +1. – Hasan Patel Jul 22 '21 at 18:30
1

It appears "display: none" no longer works, this one does. – Sven Cazier Sep 23 '21 at 12:57
This is the way. The other way still shows the arrow when hovering over the input – albertrw May 02 '23 at 12:56

score 3 · Answer 5 · answered Oct 05 '21 at 06:39

3

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

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

answered Oct 05 '21 at 06:39

meomay

31
1

score 2 · Answer 6 · answered Dec 27 '22 at 06:12

datalist::-webkit-calendar-picker-indicator {
    display: none; 
    opacity: 0;
}

It is okay but this css code will hide any calander on page. Like I'm using datepicker calender and this will also hide the controls including datalist and datetime picker.

score -2 · Answer 7 · answered Feb 13 '21 at 20:56

-2

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

answered Feb 13 '21 at 20:56

Jimmy Obonyo Abor

7,335
10
43
71

5

This disconnects the datalist from the input, so it no longer functions. The MDN example manually enables the datalist using JavaScript to avoid the input from getting "datalist attached" styles... but that's at a loss of functionality and is a bad idea (e.g. the user can no longer navigate the datalist with the keyboard). – Aaron Cicali Apr 30 '21 at 19:28

score -4 · Answer 8 · answered Jan 05 '14 at 18:35

-4

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

answered Jan 05 '14 at 18:35

jmore009

12,863
1
19
34

2

Unfortunately that doesn't remove the arrow; same goes for `appearance: none` – cantera Jan 05 '14 at 18:37

Remove Datalist Dropdown Arrow in Chrome

8 Answers8

To remove just removing the datalist input would be:

Linked