在输入字段内添加下拉箭头

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

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

原文由 dms 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 351

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

您可以尝试将下拉菜单与引导程序一起使用，例如

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

原文由 eyalix 发布，翻译遵循 CC BY-SA 3.0 许可协议

在输入字段内添加下拉箭头

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

怎么获取动态弹出对话框的模拟单击？

git提交记录问题？

为什么在 JavaScript 中直接调用和用逻辑与调用方法结果不同？

问一个鼠标滚动事件，这种是怎么实现的？

Stack Overflow 翻译