75

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

1
  • 8
    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'. Commented Jan 6, 2014 at 0:24

9 Answers 9

140

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

input::-webkit-calendar-picker-indicator {
  display: none;
}
7
  • 4
    holy balls thank you so much for this. driving me crazy
    – Jason
    Commented May 25, 2014 at 19:25
  • 9
    Warning this also impacts the html5 date input type. [list]::-webkit-calendar-picker-indicator removes only datalists.
    – jnowland
    Commented Mar 5, 2019 at 7:05
  • 6
    For IOS the selector is ::-webkit-list-button Commented Mar 29, 2019 at 22:08
  • 24
    will not work in Chrome 91 and above without !important rule
    – mustofa.id
    Commented Sep 14, 2021 at 13:06
  • 2
    finally adding !importantis working now ( chrome Version 97 )
    – Flint
    Commented Feb 4, 2022 at 6:40
31

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

4
  • This should be the highest rated answer since it has the highest level of specificity, making it more robust for future form changes.
    – stwr667
    Commented Oct 12, 2020 at 6:13
  • 1
    It should probably be noted that this is a Chrome-specific solution to a Chrome-specific problem, c.f: stackoverflow.com/questions/13693482/…
    – stwr667
    Commented Oct 12, 2020 at 6:16
  • Can anyone suggest me a way to set this property using javascript(typescript to be more specific) Commented Nov 12, 2020 at 5:53
  • 7
    Doesn't seem to work in 2021.
    – isherwood
    Commented Oct 20, 2021 at 16:27
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;
  }
1
  • 2
    Why not background-color: transparent? Commented Jul 4, 2017 at 20:19
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.

3
  • 1
    Your solution is the one that worked for me, +1. Commented Jul 22, 2021 at 18:30
  • 1
    It appears "display: none" no longer works, this one does. Commented Sep 23, 2021 at 12:57
  • This is the way. The other way still shows the arrow when hovering over the input
    – albertrw
    Commented May 2, 2023 at 12:56
3
input::-webkit-calendar-picker-indicator {
  opacity: 0;
}

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

3

input[type="text"]::-webkit-calendar-picker-indicator,
input[type="email"]::-webkit-calendar-picker-indicator,
input[type="number"]::-webkit-calendar-picker-indicator, 
input[type="search"]::-webkit-calendar-picker-indicator {
    display: none !important;
}
<input list="someList" placeholder="show arrow">
<input type="text" list="someList" placeholder="no arrow">

<datalist id="someList">
  <option value="option 1">
  <option value="option 2">
</datalist>

2
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.

-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

1
  • 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). Commented Apr 30, 2021 at 19:28
-4

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

1
  • 2
    Unfortunately that doesn't remove the arrow; same goes for appearance: none
    – cantera
    Commented Jan 5, 2014 at 18:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.