Adding a dropdown arrow inside the input field

Question

<label> Enter your favorite movies:<br/>
  <input type="text" name="movies" list="movies"/>
  <datalist id="movies">

  <label> or select one from the list:
  <select name="movies">
   <option value="Star Wars">
   <option value="The Godfather">
   <option value="Goodfellas">
  </select>
   </label>

  </datalist>
 </label>

I have this thing, but the only problem is that I want a dropdown button merged with the input field that shows the dropdown list when we click on it. The html above is perfect for what I want to do, but there's only the button missing. Is it something possible to do without javascript?

I already have that with datalist, but I want there to also be a dropdown button so I can see the list without having to doubleclick the input field. The html works for me fine. — dms, Jun 29 '16 at 14:13
Does this help? http://stackoverflow.com/questions/35196782/how-to-make-datalist-arrow-to-be-always-visible — Theodore K., Jun 29 '16 at 14:16
I don't see an arrow in the input field in the answer. Is this a browser issue and can I have the typical dropdown button we see in select dropdowns? — dms, Jun 29 '16 at 14:29
What browser are you using ? Check thsi http://stackoverflow.com/questions/31041925/datalist-arrow-not-coming-in-ie-and-firefox — VishwaKumar, Jun 29 '16 at 14:31

Hemant Sankhla · Accepted Answer · 2020-04-18T07:25:51.673

10

Check this, this will add a pseudo element in the div of input tag, for better view change the content of element to font-awesome font of down arrow.

<div class="dropdown">
    <input type="text">
</div>

And use below CSS :

.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown::before {
    position: absolute;
    content: " \2193";
    top: 0px;
    right: -8px;
    height: 20px;
    width: 20px;
}

Check fiddle : Check Fiddle

edited Apr 18 '20 at 07:25

answered Jun 29 '16 at 14:37

Hemant Sankhla

923
12
23

Is there a way to make it look like a html dropdown button? – dms Jun 29 '16 at 14:49
You could use content: "\25bc"; not exactly but some what similar – VishwaKumar Jun 29 '16 at 14:54
Updated with @VishwaKumar 's suggestion. – Naveen Paul Dec 21 '16 at 12:25
1

To make clicking on the arrow open the dropdown, just add "pointer-events: none;" to the before class. – Sarah Nov 07 '17 at 21:56

eyalix · Answer 2 · 2016-06-29T14:21:32.733

You can try to use dropdown with bootstrap instead such as

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dropdowns</h2>
  <p>The .dropdown class is used to indicate a dropdown menu.</p>
  <p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
  <p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>                                          
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </div>
</div>

score 1 · Answer 3 · answered Jun 29 '16 at 15:05

This is a quick code i came up with. You can extend this to bind click function to show the datalist dropdown. Looks fine in Chrome , IE and firefox (latest ones only).

<label> Enter your favorite movies:<br />
        <div class="datalist-wrap">
            <div class="input-wrap">
                <input id="movietxt" type="text" name="movies" list="movies" />
                <button id="caret">&#9660;</button>
            </div>
            <datalist id="movies">

                <label> or select one from the list: <select name="movies"
                    id="select">
                        <option value="Star Wars">
                        <option value="The Godfather">
                        <option value="Goodfellas">
                </select>
                </label>

            </datalist>
        </div>
    </label>

    button#caret {
      border : none;
      background : none;
      position: absolute;
      top: 0px;
      right: 0px;
    }

    .input-wrap {
      position: relative;
      display: inline;
    }

    input::-webkit-calendar-picker-indicator {
      display: none;
    }

jsfiddle

score -1 · Answer 4 · answered Jun 29 '16 at 14:33

remove select and label

    <label> Enter your favorite movies: </label><br/>
  <input type="text" name="movies" list="movies"/>
  <datalist id="movies">
   <option value="Star Wars">
   <option value="The Godfather">
   <option value="Goodfellas">
  </datalist>

Adding a dropdown arrow inside the input field

4 Answers4