Clever Geek Handbook

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.

+3


source to share


2 answers


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.

+3


source


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>
Run codeHide result


+6


source






More articles:


All Articles