Javascript 在输入字段中添加下拉箭头

我有这个东西，但唯一的问题是，我想要一个下拉按钮与输入字段合并，当我们点击它时显示下拉列表。上面的html非常适合我想做的事情，但是只缺少了一个按钮。如果没有javascript，您可以做些什么吗？

您可以尝试使用带引导的下拉菜单 比如

下拉菜单 .dropdown类用于指示下拉菜单

使用.dropdown菜单类实际构建下拉菜单

要打开下拉菜单，请使用一个按钮或一个带有.dropdown toggle和data toggle=dropdown类的链接。

下拉示例 删除并选择标签

---

选中此项，这将在输入标记的div中添加一个伪元素，为了更好地查看，将元素的内容更改为向下箭头的字体

    <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>

---

检查小提琴：

这是我想出的一个快速代码。您可以扩展此绑定单击功能以显示数据列表下拉列表。仅在Chrome、IE和firefox最新版本中看起来不错

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

---

你想要实现什么？在下拉列表中搜索？我已经有了datalist，但我希望还有一个下拉按钮，这样我就可以看到列表，而不必双击输入字段。html对我来说很好。这有帮助吗？我在答案的输入字段中没有看到箭头。这是一个浏览器问题吗？我可以使用我们在“选择”下拉列表中看到的典型下拉按钮吗？您使用的浏览器是什么？检查thsi是否有办法使其看起来像html下拉按钮？您可以使用内容：\25bc；不完全是，但一些与@VishwaKumar的建议类似的更新。要使单击箭头打开下拉列表，只需添加指针事件：无；上课前给老师打电话。

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

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

<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;
    }