How do I make the input type text look like a dropdown menu?
Is there a way that I can make the input type = text element look like a dropdown? I currently have a textbox that, when clicked, displays the options using jquery and a div. I want the textbox to have a dropdown icon so that it looks like a normal dropdown.
Also, since different browsers have a different dropdown icon, is there a way to use the same dropdown icon that the browser provides?
Note: I have to apply some css values to the parameter values before displaying which I cannot do with a normal dropdown. This is why I used div and jquery to display parameter values.
I think this is when : after pseudoelement it becomes very convenient. Wrap your input in a DIV.
#wrap:after {
content:arrow icon image;
}
JSFiddle
But you cannot use a different CSS stylesheet for different browsers, so there is only one type of icon for now.
Try this example!
<div>Choose a browser from this list:</div>
<input list="browsers" />
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
</datalist>
<div>Choose a browser from this list:</div>
<input list="browsers" />
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
</datalist>