How can I remove the default arrow from the list input and add a new arrow using pure html and css? [duplicate]

Question

I want to remove the default arrow appearing in the list input field. is there anyone please who can help me and show me a way to add a new arrow in place of the default arrow here?

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

here is the default arrow i am talking about

my expectation is to remove the default arrow and replace with a new arrow icon in the list input field

iorgu · Accepted Answer · 2024-07-19 11:22:41Z

0

We have to add type="text" to the input, and define the following:

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>

answered Jul 19, 2024 at 11:22

iorgu

3,2603 gold badges21 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I remove the default arrow from the list input and add a new arrow using pure html and css? [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related