Drop down menu with input box

Question

How can I make a drop down option with a input box using css and html like the picture below?

There are pluggins for your question such as https://github.com/blazeworx/flagstrap since you can't insert easily images into a select input but you should always show what you have tried in a SO question. — Anastasios Selmani, Nov 14 '17 at 21:38
I need a same box as like the image. But i don't need the flag in dropdown . i will add some number example:: 017 , — Rasel Ahmed Rex, Nov 14 '17 at 21:47
So you just need a dropdown? Like this? https://www.w3schools.com/tags/tag_select.asp — Anastasios Selmani, Nov 14 '17 at 21:55

Anastasios Selmani · Answer 1 · 2017-11-14T22:08:33.383

2

I guess then you need a combo box. A simple way to implement it is with the datalist like this:

    <!DOCTYPE html>
    <html>
    <body>

    <input type="text" name="example" list="exampleList">
    <datalist id="exampleList">
        <option value="017">
        <option value="018">
        <option value="019">
    </datalist>
      
    </body>
    </html>

edited Nov 14 '17 at 22:08

answered Nov 14 '17 at 21:59

Anastasios Selmani

3,579
3
32
48

Need drop down with input box – Rasel Ahmed Rex Nov 14 '17 at 22:02
I changed my answer for a combobox. Is that what you want? – Anastasios Selmani Nov 14 '17 at 22:09
No dear friend. please see this picture http://i.stack.imgur.com/D4pW2.jpg please see this picture – Rasel Ahmed Rex Nov 14 '17 at 22:22

score 1 · Answer 2 · answered Nov 28 '18 at 06:06

I guess u require the select statement for the drop down

  <!DOCTYPE html>
     <html>
     <body>
     <select id="exampleList">
            <option value="017">017</option>
            <option value="018">018</option>
            <option value="019">019</option>
     </select>    
     </body>
     </html>

this will create the dropdown list

score 0 · Accepted Answer · answered Nov 15 '17 at 05:44

0

Modify as your need

<!DOCTYPE html>
    <html lang="en">
    <body>
     <h2>This is what you want </h2>
      <center>
    <select style="height: 36px; border-right: 4px solid; width: 55px; background: transparent;">
    <option value="India">+91</option>
    <option value="India">+92</option>
    <option value="India">+93</option>
    <option value="India">+94</option>
    <option value="India">+01</option>
    </select>
    <input type="text" style="height: 30px; margin-left: -4px; padding-left: 5px;">
    </center>

    </body>
    </html>

answered Nov 15 '17 at 05:44

Uday Kumar

121
1
10

Yes .. But friend its not auto adjust in android screen .please help – Rasel Ahmed Rex Nov 15 '17 at 05:53
you have to use media query or use bootstrap – Uday Kumar Nov 15 '17 at 05:56
I already try bootstrap. But i can't adjusted input box and drop down in same line .help please – Rasel Ahmed Rex Nov 15 '17 at 06:07
how small device you are using > – Uday Kumar Nov 15 '17 at 06:09
Input box will auto adjust any device screen...no matter what device a user use friend – Rasel Ahmed Rex Nov 15 '17 at 06:14
yes it will . are you using less then 320 px width device ? Handle that by yourself using media query in css. – Uday Kumar Nov 15 '17 at 06:15
I using 540x960 px device – Rasel Ahmed Rex Nov 15 '17 at 06:23
screenshot please – Uday Kumar Nov 15 '17 at 06:27
I done it bro using media query in css ..thanks for help – Rasel Ahmed Rex Nov 15 '17 at 06:31

Drop down menu with input box

3 Answers3