Is there a way to eliminate the default arrow on a list input and replace it with a custom arrow solely with html and css?

Is there anyone who can help me figure out how to remove the default arrow in the list input field and replace it with a new arrow icon?

<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 referring to.

My goal is to replace the default arrow in the list input field with a new arrow icon.

htmlcssinputdropdownhtml-input

Answer №1

To ensure the correct behavior of the input element, we must include type="text" in the code and set up the following CSS:

input[type="text"]::-webkit-calendar-picker-indicator {
    display: none !important;
}
<body>
  <form>
    <label for="data-list">Select a browser from the list below
         <input list="browsers" name="my-browser" placeholder="Choose 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a form within a PHP script

After creating a form within a PHP file and using the post method to send a value to the next page, I encountered an issue where the variable was not being successfully passed on. What could be causing this problem? When looking at the code snippet provid ...

phphtmlformssessionpost

Looking to scan through a directory of .html files in Node.js to find specific element attributes?

Imagine trying to tackle this task - it's like reaching for a needle in a haystack. Picture a folder containing a static website, complete with images, stylesheets, and HTML files. My Node application needs to dive into this folder and extract only th ...

javascripthtmlfilenode.jsfile-type

The backtick is not functioning correctly when trying to append the result in the Internet Explorer browser

I am using the .html method to append HTML content to a specific div ID within my file. <html> <head> Title <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> ...

javascriptjqueryhtmlajax

Dynamic form validation using jQuery

I am facing a challenge with validating a dynamic form on the user side. My goal is to ensure that if a user fills out one column in a row, they are required to fill out the remaining columns as well. For example, filling out the CC # should prompt the use ...

javascriptjqueryhtmlformsvalidation

What is the best way to center my text vertically within a Bootstrap 5 "col" class division?

Struggling to create a Bootstrap 5 page and facing challenges with vertically aligning text in divs? Here's the code snippet causing problems: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" ...

htmlcssbootstrap-5

js - stop form submission

After clicking on a button with type="submit", the front-end validation starts, but I also need to perform server-side validation using Ajax. This includes checking if the name is already being used by another person. The issue arises when switching the b ...

javascripthtmlajaxforms

Disable the time selection feature in the text input field

Despite seeing the same question asked before for this issue, I am looking for a solution that does not involve replacing the textbox with the same ID. When Timepicker is selected in the dropdown menu timepicker, it should activate in the textbox (which i ...

javascriptjqueryhtmlbootstrap-timepicker

Resetting Radio Buttons for Re-Selection

I've been puzzling over this issue for some time now and have tried various methods with no luck. I'm working on a Quiz that uses radio buttons hidden from view, where they are supposed to be checked by clicking the li element they are in. Altho ...

jqueryhtml

What is the reason for the .foo a:link, .foo a:visited {} selector taking precedence over the a:hover, a:active {} selector in CSS?

Sample code: http://jsfiddle.net/RuQNP/ <!DOCTYPE html> <html> <head> <title>Foo</title> <style type="text/css"> a:link, a:visited { color: blue; } a:hover, a:active { ...

csscss-selectors

Error encountered: Required closing JSX tag for <CCol> was missing

Encountered a strange bug in vscode...while developing an app with react.js. Initially, the tags are displaying correctly in the code file. However, upon saving, the code format changes causing errors during runtime. For instance, here is an example of the ...

javascripthtmlreactjsvisual-studio-code

Click on the social media icon to access the link

Recently, I created a social media icon list for my website but I'm struggling to figure out how to add clickable links to them. I attempted using the "a" tag, but it's not functioning as expected: <div class="leftside"> <ul class= ...

htmlcsshyperlinkicons

What is the best way to ensure consistent display of a bootstrap 4 card structure on both mobile and desktop devices?

I'm attempting to make the bootstrap card look the same on mobile as it does on desktop, but I haven't been able to find a solution online. No snippets have been helpful! Below is a comparison of the appearance of the bootstrap v4 card: Desktop ...

htmlcssbootstrap-4

The default value is not displayed in the Angular dropdown menu

When using regular html select menus, if you create an option element with selected and disabled attributes and provide text for that option, the text will be displayed by default in the select menu. Below is a basic example of HTML code: <select name= ...

javascripthtmlangular

Establish restrictions for the minimum and maximum values for each year in the Date Range Picker

After searching for answers to my question, I have found some general solutions but none that fit my specific problem. I created a backend system for users to manage the availability of hotel rooms throughout the selected year. Using HTML/PHP/MySQL, I dis ...

phpjqueryhtmldaterangepicker

Is there a bug in IE9 with CSS precedence?

Two CSS rules are in place: .avo-lime-table th, .avo-lime-table td { background-color: grey; } Next rule: .avo-lime { background-color: green; } All is functioning correctly in FireFox, Chrome, Opera and Safari. However, as usual, Microsoft&apos ...

cssinternet-explorerfirefoxoperator-precedence

What is the best way to consistently update my database with an accurate time stamp every 5 seconds?

My database has a table named user which includes a field called last_seen. I am looking to regularly update this field with the current timestamp every 5 seconds. ...

phpjqueryajaxhtml

Positioning Images in Tailwind Modals

I'm currently working on building a modal using Tailwind in Vue, but I've run into some challenges with aligning the elements inside the modal as desired. I've experimented with removing certain Tailwind classes and have tried implementing ...

javascripthtmlcssvue.js

JavaScript libraries are not required when using the .append function to add HTML elements

Currently, I am attempting to utilize $.ajax in order to retrieve an html string from a php file and append it to the current html div. Oddly enough, when I use php echo, everything functions properly. However, when I attempt to load dynamically using $.lo ...

javascriptjqueryhtmlajax

Ways to showcase every resource from an API in React JS

I need help with adding code to display products along with their images from an API in my existing code. Can someone assist me with this? import React, {useState, useEffect} from 'react' import "bootstrap/dist/css/bootstrap.min.css" im ...

javascripthtmlreactjsjsx

Troubleshooting Paths with Angular's NgFor Directive

Within my Angular project, I have implemented a basic ngFor loop to display logo images. Here is a snippet of the code: <div *ngFor="let item of list" class="logo-wrapper"> <div class="customer-logo"> & ...

htmlangulartypescript