0

Safari on iOS add a blue arrow when using a datalist with an input on a website, like this :

enter image description here

I found some thread to remove the same arrow for Chrome like this one : Remove Datalist Dropdown Arrow in Chrome and it works but not for iOS and I can't find a way to hide it.

<input type="text" list="datalist">
<datalist id="datalist">
    <option>Carrots</option>
    <option>Peas</option>
    <option>Beans</option>
</datalist>

I created a basic demo here : https://jsfiddle.net/hudrfgw2/4/

Mushr00m
  • 2,258
  • 1
  • 21
  • 30

1 Answers1

0

arrow will be use in safari, so it can be hide but can't remove.

the best solution is:

input[list]::-webkit-calendar-picker-indicator,
input[list]::-webkit-list-button {
    opacity: 0 !important
}
Sol Huang
  • 11
  • 3