How to remove the Caret down icon in input box

Question

I need to remove the caret down icon input box...Once we hover the input the caret down icon is come. why? It's come means. I use the data list I want to remove the caret down icon. If It's possible.

<html>
   <body>
      <h1>The datalist element</h1>
      <form action="/action_page.php" method="get">
         <label for="browser">Choose your browser from the list:</label><input list="browsers" name="browser" id="browser">
         <datalist id="browsers">
            <option value="Edge">
            <option value="Firefox">
            <option value="Chrome">
            <option value="Opera"> 
            <option value="Safari">
         </datalist>
         <input type="submit">
      </form>
      <p><strong>Note:</strong> The datalist tag is not supported in Safari 12.0 (or earlier).</p>
   </body>
</html>

enter image description here

https://stackoverflow.com/questions/16603979/how-to-remove-the-default-arrow-icon-from-a-dropdown-list-select-element — Alex, Aug 12 '22 at 09:38
Does this answer your question? [How to remove the default arrow icon from a dropdown list (select element)?](https://stackoverflow.com/questions/16603979/how-to-remove-the-default-arrow-icon-from-a-dropdown-list-select-element) — Alex, Aug 12 '22 at 09:39

score 1 · Answer 1 · answered Aug 12 '22 at 09:42

Add the following style rule.

input::-webkit-calendar-picker-indicator {
   opacity: 0;
}

input::-webkit-calendar-picker-indicator {
   opacity: 0;
}

<html>
   <body>
      <h1>The datalist element</h1>
      <form action="/action_page.php" method="get">
         <label for="browser">Choose your browser from the list:</label><input list="browsers" name="browser" id="browser">
         <datalist id="browsers">
            <option value="Edge">
            <option value="Firefox">
            <option value="Chrome">
            <option value="Opera"> 
            <option value="Safari">
         </datalist>
         <input type="submit">
      </form>
      <p><strong>Note:</strong> The datalist tag is not supported in Safari 12.0 (or earlier).</p>
   </body>
</html>

How to remove the Caret down icon in input box

1 Answers1