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>

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

Answer 1

选中此项，这将在输入标签的div中添加一个伪元素，以便更好地查看将元素的内容更改为向下箭头的字体 - 真棒字体。

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

检查小提琴：Check Fiddle

Answer 2

您可以尝试使用带引导程序的下拉列表比如

＆＃13;

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

＆＃13;

Answer 3

这是我提出的快速代码。您可以将其扩展为绑定单击功能以显示datalist下拉列表。在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

Answer 4

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

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

4 个答案: