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
New contributor
Omar Bin Saleh is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
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>