How to make an input type text look like select dropdown?

Question

Is there any way by which I can make an input type=text element look like a dropdown? Currently I have a text box which when clicked I am displaying options using jquery and div. I want the text box to have a drop down icon to make it exactly look like a regular dropdown.

Also since different browsers have different dropdown icon is there a way to use the same dropdown icon that the browser provides?

Note: I have to apply some css to the option values before displaying it which I cant do using regular dropdown. That is why I have used div and jquery to display the option values.

Solution 1

I think this is when :after pseudoelement gets in handy. Wrap your input in DIV.

 #wrap:after {
     content:arrow icon image;
 }

JSFiddle

But there's no way you could use different CSS style sheet for different browser yet, so only one type of icon so far.

Solution 2

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>

Comments

[Joakim M]

Maybe I misinterpret the question?

[Sachin B. R.]

I have to apply some css to the option values before displaying it which I cant do using your code or by using regular dropdown. That is why I have used div and jquery to display the option values.