css 如何创建一个带有搜索但不带JS的选择菜单

ee7vknir 于 2023-01-22 发布在其他

关注(0)|答案(1)|浏览(119)

有没有可能在不使用JavaScript的情况下，用纯HTML和CSS创建一个带有搜索选项的选择菜单。
我知道HTML https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select中有一个select标签，但里面没有搜索功能。我需要创建一个简单的网页，我不想使用JavaScript/PHP或库，因为我不知道这些编程语言。

css

来源：https://stackoverflow.com/questions/75194702/how-to-create-a-select-menu-with-search-without-js

1条答案

按热度按时间

u4dcyp6a1#

是的，有可能。如果您将<input>标签与<datalist>一起使用，而不是使用<select>标签。在<input>标签中，您需要写入list属性，并提供一个名称。此名称将是<datalist>的id，如示例所示。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" list="select" />

    <datalist id="select">
      <option value="item 1"></option>
      <option value="item 2"></option>
      <option value="item 3"></option>
      <option value="item 4"></option>
      <option value="item 5"></option>
      <option value="item 6"></option>
      <option value="item 7"></option>
      <option value="item 8"></option>
    </datalist>
  </body>
</html>

使用<input>标签，您可以搜索项目，而且所有这些都是在纯HTML中完成的，没有JavaScript。

赞(0）回复(0）举报 2023-01-22

我来回答

css 如何创建一个带有搜索但不带JS的选择菜单

1条答案

相关问题

热门标签

最新问答