Remove Datalist Dropdown Arrow in Chrome

前端 未结 5 1903
执念已碎
执念已碎 2021-02-02 05:57

Chrome has apparently added a dropdown arrow to text inputs that reference a . It\'s appearing in Chrome 34 (Canary) but not in the current stable b

相关标签:
5条回答
  • 2021-02-02 06:04

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

    0 讨论(0)
  • 2021-02-02 06:06

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

    input::-webkit-calendar-picker-indicator {
      display: none;
    }
    
    0 讨论(0)
  • 2021-02-02 06:17
    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.

    0 讨论(0)
  • 2021-02-02 06:24

    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;
      }
    
    0 讨论(0)
  • 2021-02-02 06: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; }

    0 讨论(0)
提交回复
热议问题