CODEWITHSUNDEEP
javascripthtmlcss
kathirvel S
kathirvel S

Reputation: 1

How to remove the Caret down icon in input box

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

Upvotes: 0

Views: 99

Answers (1)

Ian
Ian

Reputation: 1179

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>

Upvotes: 1

Related Questions