如何从列表输入中删除默认箭头并使用纯 html 和 css 添加新箭头？ [重复]

问题描述 投票：0回答：1

我想删除列表输入字段中出现的默认箭头。有谁可以帮助我并向我展示一种在此处添加新箭头代替默认箭头的方法吗？

<body>
   <form >
      <label for="data-list">Choose a browser from this list 
         <input list="browsers" name="my-browser" placeholder="Enter color">

         <datalist id="browsers">
            <option value="Green"></option>
            <option value="Red"></option>
            <option value="Blue"></option>
            <option value="Yellow"></option>
            <option value="Black"></option>
         </datalist>
      </label>
      
   </form>
</body>

这是我所说的默认箭头

我的期望是删除默认箭头并替换为列表输入字段中的新箭头图标

html css input dropdown html-input
1个回答
0
投票

我们必须将 

type="text"
添加到 
input
，并定义以下内容：

input[type="text"]::-webkit-calendar-picker-indicator {
    display: none !important;
}
<body>
  <form>
    <label for="data-list">Choose a browser from this list 
         <input list="browsers" name="my-browser" placeholder="Enter color" type="text">

         <datalist id="browsers">
            <option value="Green"></option>
            <option value="Red"></option>
            <option value="Blue"></option>
            <option value="Yellow"></option>
            <option value="Black"></option>
         </datalist>
      </label>

  </form>
</body>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.