在输入框内添加下拉箭头

Question

在输入框内添加下拉箭头

6

<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

你想要实现什么？在下拉菜单中搜索？ - Zakaria Acharki

我已经使用datalist实现了这个功能，但我希望还有一个下拉按钮，这样我就不必双击输入框就可以查看列表。HTML对我来说很好用。 - dms

在答案的输入字段中，我没有看到箭头。这是一个浏览器问题吗？我能否使用我们在选择下拉菜单中看到的典型下拉按钮？ - dms

你正在使用哪个浏览器？请查看此链接：https://dev59.com/lV0Z5IYBdhLWcg3wzC9W - VishwaKumar

我正在使用Firefox。 - dms

显示剩余2条评论

4个回答

1

您可以尝试使用Bootstrap下拉菜单，例如：

<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

1

这是我想出的一个快速代码。您可以扩展它以绑定单击函数以显示数据列表下拉菜单。在Chrome、IE和Firefox（仅最新版本）中看起来很好。

<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

的英译中，保留html，不要解释。

- VishwaKumar

-1

移除 select 和 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>

- boomcode

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hemant Sankhla · Accepted Answer

检查一下，这将在输入标记的div中添加一个伪元素，为了更好的视图，将元素的内容更改为向下箭头的font-awesome字体。

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

使用以下 CSS：

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

查看fiddle：查看Fiddle